How to get info from API based on similar attributes

Question

So I have been working with an external API with React for the front end and I'm still learning by doing so I might have some basic questions.

So my data has an array called as opponents

"opponents": [
{
"opponent": {
"acronym": "SMB",
"id": 129088,
"image_url": "https://cdn.pandascore.co/images/team/image/129088/super_massive_blazelogo_square.png",
"location": "TR",
"modified_at": "2022-01-20T17:14:56Z",
"name": "SuperMassive Blaze",
"slug": "supermassive-blaze"
},
"type": "Team"
},
{
"opponent": {
"acronym": "BJK",
"id": 655,
"image_url": "https://cdn.pandascore.co/images/team/image/655/besiktas.png",
"location": "TR",
"modified_at": "2022-02-19T17:04:48Z",
"name": "Beşiktaş Esports",
"slug": "besiktas"
},
"type": "Team"
}
],

In the same array there is an another array known as RESULTS

"results": [
{
"score": 0,
"team_id": 129088
},
{
"score": 1,
"team_id": 655
}
],

My code so far -

import React, { useState, useEffect } from 'react'
export default function TestData() {


  const [matches, setMatches] = useState([])



  useEffect(() => {
    fetch('API LNINK')
      .then(response => response.json())
      .then(matches => {
        console.log(matches)
        setMatches(matches)

        console.log('matches', JSON.stringify(matches, null, 2))

      })
      .catch(error => console.error(error))
  }, [])


  const listOfMatches = matches.map(match => {
    return (
      <div>
      <li key={match.id}>Match: {match.name}  Winner : {match.winner && match.winner.name}  </li>

      {match.opponents.map((sub) => 
              <li key={sub.id} className={sub.acronym}>
           {sub.opponent.name}  
 
           </li>
        
            )}
            
            



      
     
      
      </div>
      )
  })



  return (

    <div>
      <div>Matches: {matches.length}</div>
      <ul>
        {listOfMatches}
        <br/>
        
      </ul>
    </div>
  );
}

I can access them both perfectly well individually and I know how to access an array inside an array in javascript, but how do I go about displaying the Score along with the Opponent Name

**What I'm trying to Achieve :
 Beşiktaş Esports" : Score : 1
 SuperMassive Blaze : Score : 0**

Answer 1

This code does what you want. But ... try to solve it on your own. Nothing too tricky here.

const opponents = [{
    "opponent": {
      "acronym": "SMB",
      "id": 129088,
      "image_url": "https://cdn.pandascore.co/images/team/image/129088/super_massive_blazelogo_square.png",
      "location": "TR",
      "modified_at": "2022-01-20T17:14:56Z",
      "name": "SuperMassive Blaze",
      "slug": "supermassive-blaze"
    },
    "type": "Team"
  },
  {
    "opponent": {
      "acronym": "BJK",
      "id": 655,
      "image_url": "https://cdn.pandascore.co/images/team/image/655/besiktas.png",
      "location": "TR",
      "modified_at": "2022-02-19T17:04:48Z",
      "name": "Be?ikta? Esports",
      "slug": "besiktas"
    },
    "type": "Team"
  }
]

const results = [{
    "score": 0,
    "team_id": 129088
  },
  {
    "score": 1,
    "team_id": 655
  }
]

// Here is your response containing both opponents and results.
// Maybe you get this as a string and call JSON.parse(response)
// turn it into an object
const response = {
  opponents,
  results
}

console.log('response', JSON.stringify(response, null, 2))

// You can forEach(opponent => ... and then access opponent.opponent.name
// OR destructure the inner opponent object from the outer one
// using ({opponent}) as shown here.
response.opponents.forEach(({
  opponent
}) => {
  const found = response.results.find(result => result.team_id === opponent.id)
  const score = found === undefined ? 'n/a' : found.score
  console.log(`${opponent.name} : Score : ${score}`)
})