Greifen Sie auf ein untergeordnetes JSON-Objekt für dieses spezifische JSON-Objekt zu

Question

Ich spiele mit Versprechen und API-Anrufen, dieses Mal mit https://www.warcraftlogs.com/v1/docs. Das Ziel dieses Beispiels ist, wenn Sie auf die Schaltfläche zones klicken, werden alle Zonen angezeigt und Sie können auf sie klicken (dieser Teil ist fertig). Der nächste Teil soll detaillierte Informationen über eine bestimmte Zone anzeigen, wenn clicked, in diesem Fall das Array encounters im Zonenobjekt.

Hier ist der Stift in Frage: http://codepen.io/kresimircoko/pen/ZLJjVM?editors=0011.

Die Frage ist, wie auf das encounters Array für die zone zugreifen, dass der Benutzer geklickt hat?

Und der Code:

const API_KEY = '?api_key=625023d7336dd01a98098c0b68daab7e'; 
    const root = 'https://www.warcraftlogs.com:443/v1/'; 
    const zonesBtn = document.querySelector('#zones'); 
    const responseList = document.querySelector('#response'); 
    console.clear(); 

    const requestJSON = objType => { 
     return new Promise((resolve, reject) => { 
      const xhr = new XMLHttpRequest(); 
      xhr.onload = function() { 
       try { 
        resolve(JSON.parse(this.responseText)); 
       } 
       catch (e) { 
        reject(e); 
       } 
      }; 
      xhr.onerror = reject; 
      xhr.open('GET', root + objType + API_KEY); 
      xhr.send(); 
     }); 
    }; 
    function displayBosses(zoneID) { 
     requestJSON('zones') 
      .then(data => { 
       return data.find(zone => { 
        return zone.id === zoneID; 
       }); 
      }) 
    } 

    function displayZones() { 
     let output = ''; 
     requestJSON('zones') 
      .then(zones => { 
       return zones.map(zone => { 
        output += `<li data-zoneid="${zone.id}"> ${zone.name} </li>`; 
        response.innerHTML = output; 
       }).join(''); 
      }) 
      .then(responseList.style.display = 'flex'); 
    } 

    zonesBtn.addEventListener('click', displayZones); 
    responseList.addEventListener('click', evt => { 
     const zoneID = evt.target.dataset.zoneid; 
     displayBosses(zoneID); 
    }) 

Hier ist ein Teil der JSON-Ausgabe mit Ich arbeite:

[ 
    { 
     "id": 3, 
     "name": "Challenge Modes", 
     "frozen": true, 
     "encounters": [ 
      { 
       "id": 11182, 
       "name": "Auchindoun" 
      }, 
      { 
       "id": 11175, 
       "name": "Bloodmaul Slag Mines" 
      }, 
      { 
       "id": 11279, 
       "name": "The Everbloom" 
      }, 
      { 
       "id": 11208, 
       "name": "Grimrail Depot" 
      }, 
      { 
       "id": 11195, 
       "name": "Iron Docks" 
      }, 
      { 
       "id": 11176, 
       "name": "Shadowmoon Burial Grounds" 
      }, 
      { 
       "id": 11209, 
       "name": "Skyreach" 
      }, 
      { 
       "id": 11358, 
       "name": "Upper Blackrock Spire" 
      } 
     ], 
     "brackets": [ 
      { 
       "id": 1, 
       "name": "6.0" 
      }, 
      { 
       "id": 2, 
       "name": "6.1" 
      }, 
      { 
       "id": 3, 
       "name": "6.2" 
      } 
     ] 
    }, 
    { 
     "id": 4, 
     "name": "Throne of Thunder", 
     "frozen": true, 
     "encounters": [ 
      { 
       "id": 1577, 
       "name": "Jin'rokh the Breaker" 
      }, 
      { 
       "id": 1575, 
       "name": "Horridon" 
      }, 
      { 
       "id": 1570, 
       "name": "Council of Elders" 
      }, 
      { 
       "id": 1565, 
       "name": "Tortos" 
      }, 
      { 
       "id": 1578, 
       "name": "Megaera" 
      }, 
      { 
       "id": 1573, 
       "name": "Ji-kun" 
      }, 
      { 
       "id": 1572, 
       "name": "Durumu the Forgotten" 
      }, 
      { 
       "id": 1574, 
       "name": "Primordius" 
      }, 
      { 
       "id": 1576, 
       "name": "Dark Animus" 
      }, 
      { 
       "id": 1559, 
       "name": "Iron Qon" 
      }, 
      { 
       "id": 1560, 
       "name": "Twin Consorts" 
      }, 
      { 
       "id": 1579, 
       "name": "Lei Shen" 
      }, 
      { 
       "id": 1580, 
       "name": "Ra-den" 
      } 
     ] 
    }, 

Answer 1

Änderungsfunktion displayBosses wie hier dargestellt (siehe Kommentare in Code):

function displayBosses(zoneID) { 
    requestJSON('zones') 
     .then(data => { 
      const encounters = return data.find(zone => { 
       return zone.id === parseInt(zoneID, 10); //<-- do parseInt before checking 
      }).encounters; // <-- read property encounters 

      console.log(encounters); // <--- variable encounters will have the required data. 
     }) 
} 

Hoffe das hilft Ihnen.

EDIT:

die neue Liste anzuzeigen:

function displayBosses(zoneID) { 
    requestJSON('zones') 
     .then(data => { 
      let output = ''; 
      data.find(zone => zone.id === parseInt(zoneID, 10)) 
      .encounters 
      .forEach(enc => { 
       output += `<li data-zoneid="${enc.id}"> ${enc.name} </li>`; 
      }); 

     response.innerHTML = output; 

    }); 
}