访问该特定JSON对象的JSON子对象

Question

我正在玩承诺和API调用，这次是https://www.warcraftlogs.com/v1/docs。这个例子的目标是，当你点击zones按钮时，所有区域都会显示出来，并允许你点击它们（该部分完成）。下一部分是在区域对象clicked（本例中为encounters数组）时显示有关特定区域的详细信息。

这里是有问题的笔：http://codepen.io/kresimircoko/pen/ZLJjVM?editors=0011。

问题是如何访问用户点击过的zone的encounters数组？

，代码：

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

希望这可以帮助你。

编辑：

要显示新的列表：

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; 

    }); 
}