For 循环不循环 JSON 数组

Question

我从 fetch 中获取了 JSON 格式的运动员姓名列表。使用 for 循环，我想获取花名册 > 运动员 > 姓名下的所有姓名，然后将它们插入到下拉菜单中。

但由于某种原因，循环不起作用。如果我拿出循环并只抓住一名运动员，那就有效了。也许我对数组和对象感到困惑？

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

超文本标记语言

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

希望循环后能变成这样

<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>

Answer 1

只需看看您在这里所做的语义即可：

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

您正在创建一个名为“运动达人”的变量，并将其值设置为“运动员”。某事物的单个实例不是某事物的列表。在该操作中，您指定0数组的索引。如果要循环整个数组，请勿仅使用其中的元素之一。使用整个数组：

const athletes = data.team.roster;

那么数组中的每个元素将类似于：

{
  "athlete": {
    "name": "John Doe",
    "age": 20
  }
}

因此，在循环中引用它的值将类似于：

athletes[i].athlete.name