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

我在玩弄承诺和API调用，这次是用。本例的目的是当您单击

区域

按钮时，所有区域都将显示，并允许您单击它们（该部分已完成）。下一部分是在单击

时显示有关特定区域的详细信息，在本例中，
在区域对象中遇到了
数组

这是那支笔：

问题是如何访问用户单击的
区域
的
遭遇
数组

以及守则：

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

更改功能
DisplayBoss
，如下所示（参见代码中的注释）：

功能显示凸台（zoneID）{
requestJSON（'区域'）
。然后（数据=>{
const conferences=返回数据。查找（区域=>{
return zone.id==parseInt（zoneID，10）；//{
输出+=`
${enc.name}
`；
});
response.innerHTML=输出；
});
}
更改功能
显示凸台
，如图所示（参见代码中的注释）：

功能显示凸台（zoneID）{
requestJSON（'区域'）
。然后（数据=>{
const conferences=返回数据。查找（区域=>{
return zone.id==parseInt（zoneID，10）；//{
输出+=`
${enc.name}
`；
});
response.innerHTML=输出；
});
}
您有什么问题吗？请发布服务器返回的JSON示例。在不知道结构的情况下，我们无法建议如何访问。@VanquishedWombat添加了JSON的一部分，特别是前两个对象。您有什么问题吗？请发布服务器返回的JSON示例。不知道结构ure我们无法建议如何访问。@VanquishedWombat添加了JSON的一部分，特别是到目前为止的前两个objectsGood-如何让DisplayBoss（）以与displayZones（）相同的方式输出列表元素对区域有帮助吗？这很有吸引力，谢谢。你对如何为结果生成HTML有什么建议吗？或者我应该像我在
显示区域
功能中那样使用
。innerHTML
？@VanquishedWombat OP只询问了如何访问用户拥有的区域的遭遇数组点击继续。没有人询问如何显示或在哪里显示。@KrešimirČoko几乎是一样的。唯一的区别是，在放置新的元素之前，您必须删除现有的子
li
元素。很好，到目前为止-您如何获得DisplayBoss（）以与displayZones（）相同的方式输出列表元素对区域有帮助吗？这很有吸引力，谢谢。你对如何为结果生成HTML有什么建议吗？或者我应该像我在
显示区域
功能中那样使用
。innerHTML
？@VanquishedWombat OP只询问了如何访问用户拥有的区域的遭遇数组单击。没有人询问如何显示或在何处显示。@KrešimirČoko几乎是一样的。唯一的区别是，在放置新元素之前，必须删除现有的子元素
li
。
    [
    {
        "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"
            }
        ]
    },

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;

    });
}