Цикл for не зацикливает массив JSON
У меня есть список имен спортсменов в формате 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>`
}
})
}
HTML
<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>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Просто посмотрите, что вы здесь делаете семантически:
const athletes = data.team.roster[0].athlete
Вы создаете переменную с именем спортсмены и устанавливаете ее значение для спортсмена. Один экземпляр чего-то не является списком чего-то. В этой операции вы указываете индекс 0 массива. Если вы хотите перебрать весь массив, не используйте только один из его элементов. Используйте весь массив:
const athletes = data.team.roster;
Тогда каждый элемент массива будет выглядеть так:
{
"athlete": {
"name": "John Doe",
"age": 20
}
}
Таким образом, ссылка на значение в цикле будет выглядеть примерно так:
athletes[i].athlete.name
Свойство athlete не является массивом и не имеет .length. Именно roster является массивом, который необходимо перебрать. Например:
for (const {athlete: { name }} of data.team.roster) {
getPlayers.innerHTML += `<option value = "${name}">${name}</option>`;
}
Вы должны взять team.roster с data и перебрать значения.
Каждое значение должно иметь атрибут athlete.name.
const playerSelect = document.getElementById('getPlayers');
// Mock the fetch call
const fetch = async (url, options) => Promise.resolve(({
json: async () => Promise.resolve({
"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 } }
]
}
})
}));
async function getAthletes() {
await fetch('athlete.json', { method: 'GET' })
.then((response) => response.json())
.then(({ team: { roster } }) => {
roster.forEach(({ athlete: { name } }) => {
// DOM manipulation, no hand-written HTML
playerSelect.append(new Option(name, name));
});
});
}
getAthletes(); // Call the async function to populate the select<select id = "getPlayers" data-category = "Vote" data-action = "click" data-label = "Select Player">
<option value = "">Select player</option>
</select>Прежде всего, из вашего JSON data.team.roster — это массив. Итак, мы должны повторить этот массив.
JS-код
async function getAthletes() {
const getPlayers = document.getElementById('getPlayers')
await fetch('athlete.json', {
method: 'GET'
})
.then((response) => response.json())
.then(data => {
const rosters = data.team.roster
for(let i = 0; i < rosters.length; i++) {
getPlayers.innerHTML += `<option
value = "${rosters[i].athlete.name}">${rosters[i].athlete.name</option>`
}
})
}
Что касается вашего другого сомнения, да, вы также можете перебирать объект, но с циклом for-in, циклом for-each или циклом for-of (не с обычным FOR). Массивы можно зацикливать, используя обычные операторы FOR и Foreach.