Доступ к дочернему объекту JSON для этого конкретного объекта JSON

Question

Я играю с обещаниями и вызовами API, на этот раз с https://www.warcraftlogs.com/v1/docs. Цель этого примера - нажать кнопку zones, чтобы все зоны появлялись и позволяли вам нажимать на них (эта часть выполнена). Следующая часть должна показать подробную информацию о конкретной зоне, когда clicked, в данном случае массив encounters в объекте зоны.

Вот эта ручка в вопросе: http://codepen.io/kresimircoko/pen/ZLJjVM?editors=0011.

Вопрос в том, как получить доступ к массиву encounters для zone, на который пользователь нажал?

И код:

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); 
    }) 

Вот часть вывода JSON я работаю с:

[ 
    { 
     "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

Изменение функции displayBosses, как показано здесь (см комментарии в коде):

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. 
     }) 
} 

Надеюсь, это вам поможет.

EDIT:

Чтобы отобразить новый список:

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; 

    }); 
}