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

Question

我正在使用 Promise 和 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如下所示（见代码中的cmets）：

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;

    });
}