¿Como recorrer un array de objetos de un JSON?

Question

estoy trabajando en un proyecto personal utilizando la api rest de League of Legends y necesito recorrer el array que contiene el JSON de datos para que a la hora de dibujar las partidas, salga el nombre y foto del campeón en lugar de su Id que es lo que ahora me devuelve.

Aquí os dejo parte de mi JS, debería recorrerlo en la funcion getchamp, pero ahora mismo estoy en blanco y no se exactamente como hacerlo.

   function tabla(datos){
  console.log(datos)
  var partidas = document.querySelector('#partidas')
  partidas.innerHTML = ``
  for(let valor of datos){
   console.log(valor)

   var mgameId = valor.gameId
   

       fetch('https://'+region+'.api.riotgames.com/lol/match/v4/matches/'+gameId+'?api_key=<key>')
       .then(res => res.json())
       .then(data => {

        getchamp(data.participants['0'].championId)

        partidas.innerHTML += `
      <tr>
                <td>${data.participants['0'].championId}</td>
                <td>${data.participants['0'].stats.kills}/${data.participants['0'].stats.deaths}/${data.participants['0'].stats.assists}</td>
                <td>
      ${data.participants['0'].stats.item0},
               ${data.participants['0'].stats.item1},
               ${data.participants['0'].stats.item2},
      ${data.participants['0'].stats.item3},
               ${data.participants['0'].stats.item4},
               ${data.participants['0'].stats.item5},
               ${data.participants['0'].stats.item6}
                </td>
               </tr>` 


       
      })


  }

  document.getElementById('tablaPartidas').style.display = 'inline'

   } 

   function getchamp(ID){

     fetch('json/champion.json')
       .then(res => res.text())
       .then(data => {
        var myJSON = data
        var myObj = JSON.parse(myJSON)
     console.log(myObj)
   })
      
  


   }


      
}

Edit: Y el principio del JSON, se me pasó ponerlo, perdonad. Simplemente os muestro un campeón porque el JSON es mas largo que un día sin pan.

{
"type": "champion",
"format": "standAloneComplex",
"version": "6.24.1",
"data": {
    "Aatrox": {
        "version": "6.24.1",
        "id": "Aatrox",
        "key": "266",
        "name": "Aatrox",
        "title": "the Darkin Blade",
        "blurb": "Aatrox is a legendary warrior, one of only five that remain of an ancient race known as the Darkin. He wields his massive blade with grace and poise, slicing through legions in a style that is hypnotic to behold. With each foe felled, Aatrox's ...",
        "info": {
            "attack": 8,
            "defense": 4,
            "magic": 3,
            "difficulty": 4
        },
        "image": {
            "full": "Aatrox.png",
            "sprite": "champion0.png",
            "group": "champion",
            "x": 0,
            "y": 0,
            "w": 48,
            "h": 48
        },
        "tags": [
            "Fighter",
            "Tank"
        ],
        "partype": "BloodWell",
        "stats": {
            "hp": 537.8,
            "hpperlevel": 85.0,
            "mp": 105.6,
            "mpperlevel": 45.0,
            "movespeed": 345.0,
            "armor": 24.384,
            "armorperlevel": 3.8,
            "spellblock": 32.1,
            "spellblockperlevel": 1.25,
            "attackrange": 150.0,
            "hpregen": 6.59,
            "hpregenperlevel": 0.5,
            "mpregen": 0.0,
            "mpregenperlevel": 0.0,
            "crit": 0.0,
            "critperlevel": 0.0,
            "attackdamage": 60.376,
            "attackdamageperlevel": 3.2,
            "attackspeedoffset": -0.04,
            "attackspeedperlevel": 3.0
        }
    },
    "Ahri": {
        "version": "6.24.1",
        "id": "Ahri",
        "key": "103",
        "name": "Ahri",
        "title": "the Nine-Tailed Fox",

Muchas gracias de antemano.

Buenos días.Podrías actualizar la pregunta y añadir la estructura de tu fichero `json/champion.json`? — Ilsanchez, Apr 24 '19 at 07:00
Listo, @Ilsanchez se me había olvidado ponerlo, muchas gracias. — dpalacio, Apr 24 '19 at 07:11
En primer lugar deberías ocultar tu API KEY. En segundo lugar entiendo que estás poniendo un JSON específico en lugar del JSON que te devuelve la llamada ya que estas accediendo a un array de participantes y en ese array intuyo que te pondrá el campeon con el que jugó, intenta poner tambien el json que sale en el `console.log(myObj)` — David, Apr 24 '19 at 07:32
Relacionado: https://es.stackoverflow.com/questions/164943/cu%C3%A1l-es-la-diferencia-entre-json-y-un-objeto-en-javascript/164944#164944 — Pablo Lozano, Apr 24 '19 at 08:13

score 0 · Answer 1 · answered Apr 24 '19 at 07:42

Prueba esto:

function tabla(datos) {
  console.log(datos);
  var partidas = document.querySelector('#partidas');
  partidas.innerHTML = ``;
  for (let valor of datos) {
    console.log(valor);

    var mgameId = valor.gameId;
    getChampionsJSON().then(champions => {
      fetch(
        'https://' +
          region +
          '.api.riotgames.com/lol/match/v4/matches/' +
          gameId +
          '?api_key=RGAPI-b2835223-11eb-41a6-8cdc-0035c95a73af'
      )
        .then(res => res.json())
        .then(data => {
          data.participants.forEach(participant => {
            var champ = getchamp(champions, participant.championId);
            if (champ) {
              // champ aqui es { name: '...', image: {...}};
              partidas.innerHTML += `
                      <tr>
                      <td>${participant.championId}</td>
                      <td>${participant.stats.kills}/${
                participant.stats.deaths
              }/${participant.stats.assists}</td>
                        <td>
                        ${participant.stats.item0},
                        ${participant.stats.item1},
                        ${participant.stats.item2},
                        ${participant.stats.item3},
                        ${participant.stats.item4},
                        ${participant.stats.item5},
                        ${participant.stats.item6}
                        </td>
                        </tr>`;
            }
          });
        });
    });
  }

  document.getElementById('tablaPartidas').style.display = 'inline';
}

function getChampionsJSON() {
  return fetch('json/champion.json')
    .then(res => res.json())
    .then(data => data.data);
}

function getchamp(champs, ID) {
  // Recorremos las claves del objeto que son los nombres de los campeones
  return Object.keys(
    champs /* Objeto que contiene los campeones por nombre */
  ).reduce((prev, currK) => {
    if (champs[currK] && champs[currK].id === ID) {
      // Buscamos el campeon por la propiedad ID
      const { name, image } = champs[currK]; // Extraemos las propiedades name e image y las devolvemos
      return { name, image };
    }
  }, {});
}

He extraído la función que devuelve el JSON de campeones para pedirlo una única vez, por que entiendo que querrás mostrar todos los campeones de la partida, así evitamos peticiones innecesarias.

En lugar de coger solo el campeón en el indice 0 los recorremos, así debería mostrarte la tabla completa

Muchas gracias, esto era lo que buscaba. Aunque ahora al ejecutar el código no me imprime nada por pantalla, me da un TypeError; dice que data.participants no está definido y, la verdad, no se por qué es. — dpalacio, Apr 24 '19 at 10:22
Es como lo tenias tu, así que no debería dar ese error si antes no lo daba. Revisa la respuesta de la peticion, a ver si `participants` es un objeto o un array — Ilsanchez, Apr 24 '19 at 10:25

¿Como recorrer un array de objetos de un JSON?

1 Answers1