使用for循环遍历JSON数组生成下拉选项失效问题求助

通过fetch获取JSON格式的运动员名单，想要用for循环提取roster>athlete>name下的所有名称并插入到下拉菜单中，但循环无法正常工作。单独获取单个运动员时可以成功，推测是混淆了数组与对象的概念。

JSON 数据 #

{
    "team": {
        "color": "000000",
        "country": "USA",
        "roster": [
            {
                "athlete": {
                    "name": "John Doe",
                    "age": 20
                }
            },
            {
                "athlete": {
                    "name": "Jane Doe",
                    "age": 21
                }
            },
            {
                "athlete": {
                    "name": "Jack Doe",
                    "age": 22
                }
            },
            {
                "athlete": {
                    "name": "Joe Doe",
                    "age": 23
                }
            }
        ]
    }
}

原JS代码 #

async function getAthletes() {

    const getPlayers = document.getElementById('getPlayers')

    await fetch('athlete.json', {
        method: 'GET'
    })
    .then((response) => response.json())
    .then(data => {

        const athletes = data.team.roster[0].athlete

        for(let i = 0; i < athletes.length; i++) {
            getPlayers.innerHTML += `<option value="${athletes[i].name}">${athletes[i].name}</option>`
        }
    }) 
}

HTML代码 #

<select id="getPlayers" data-category="Vote" data-action="click" data-label="Select Player">
    <option value="">Select player</option>
</select>

问题分析 #

出错的核心原因是错误地将单个对象当成了数组：

• data.team.roster才是存储所有运动员的数组，而data.team.roster[0].athlete只是数组里第一个元素的athlete对象，它没有length属性，导致循环条件i < athletes.length不成立，循环根本没执行。

修正后的JS代码 #

async function getAthletes() {
    const getPlayers = document.getElementById('getPlayers')

    await fetch('athlete.json', {
        method: 'GET'
    })
    .then((response) => response.json())
    .then(data => {
        // 直接获取roster数组，这才是要遍历的对象
        const roster = data.team.roster
        
        for(let i = 0; i < roster.length; i++) {
            // 每个roster元素里的athlete对象才包含name
            const athleteName = roster[i].athlete.name
            getPlayers.innerHTML += `<option value="${athleteName}">${athleteName}</option>`
        }
    }) 
}

也可以用更简洁的forEach遍历：

async function getAthletes() {
    const getPlayers = document.getElementById('getPlayers')

    await fetch('athlete.json', {
        method: 'GET'
    })
    .then((response) => response.json())
    .then(data => {
        data.team.roster.forEach(item => {
            const name = item.athlete.name
            getPlayers.innerHTML += `<option value="${name}">${name}</option>`
        })
    }) 
}

预期效果 #

修正后，下拉菜单会生成如下结构：

<select id="getPlayers" data-category="pick" data-action="click" data-label="Select Player">
    <option value="">Select player</option>
    <option value="John Doe">John Doe</option>
    <option value="Jane Doe">Jane Doe</option>
    <option value="Jack Doe">Jack Doe</option>
    <option value="Joe Doe">Joe Doe</option>
</select>

内容的提问来源于stack exchange，提问作者Mike Lin