我正在嘗試創建一個回圈以使用 fetch 顯示來自 api 的每個元素，但是 api 具有以下結構：
{
"pokemons": [
{
"id": 1,
"name": "germignon",
"level": 80,
"image": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png",
"abilities": [
{
"name": "vampigrain",
"icon": "??",
"power": 60,
"description": "Pokem ipsum dolor sit amet Technical Machine Shuckle Magneton Earthquake Marsh Badge Raichu. Dragon Pokemon Fan Club Chairman Golem Dodrio Psychic to denounce the evils of truth and love Marshtomp. Earth Badge Shuckle Mew Celadon Department Store Snorlax"
}
],
"background_color": "#E0ED94"
},
{
"id": 2,
"name": "kaiminus",
"level": 28,
"image": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/5.png",
"abilities": [
{
"name": "foam",
"icon": "??",
"power": 30,
"description": "Pokem ipsum dolor sit amet Technical Machine Shuckle Magneton Earthquake Marsh Badge Raichu. Dragon Pokemon Fan Club Chairman Golem Dodrio Psychic to denounce the evils of truth and love Marshtomp. Earth Badge Shuckle Mew Celadon Department Store Snorlax"
},
{
"name": "hydrocannon",
"icon": "??",
"power": 150,
"description": "Pokem ipsum dolor sit amet Technical Machine Shuckle Magneton Earthquake Marsh Badge Raichu. Dragon Pokemon Fan Club Chairman Golem Dodrio Psychic to denounce the evils of truth and love Marshtomp. Earth Badge Shuckle Mew Celadon Department Store Snorlax"
}
],
"background_color": "#A1E3FF"
},
我在使用口袋妖怪訪問“能力”時遇到了麻煩 任何人都可以幫忙嗎
我試過這個：
fetch('https://pokeapi-enoki.netlify.app/').then((response) => {
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
return response.json();
})
.then((response) => {
let data=" ";
response.pokemons.map((value)=>{
data = ` <div id="${value.id}" style="background-color: ${value.background_color }" >
<div > <p >${value.name }</p>
<p class = "level" > Niv.${value.level }${value.abilities.icon}</p>
</div>
<div >
<img src="${value.image }" alt="我正在嘗試遍歷包含 aobject 的陣列" srcset="">
</div>
<div >
<div >
<span >${value.abilities.name}</span>
<span >${value.abilities.icon}</span>
<span >${value.abilities.power}</span>
<p>${value.abilities.description}</p>
</div>
</div>`
});
document.querySelector("#carContainer").innerHTML =data;
}).catch((error)=>
console.log(error))
但它不作業。我無法在它回傳的能力中顯示任何東西 underfined
我試過的嵌套的lop
let data=" ";
for(var i = 0; i < response.pokemons.length; i ) {
for(var a = 0; a < response.pokemons[i].abilities.length; a ) {
data = `<div >
<div id="${response.pokemons[i].id}" style="background-color: ${response.pokemons[i].background_color }" >
<div > <p >${response.pokemons[i].name }</p>
<p class = "level" > Niv.${response.pokemons[i].level }${response.pokemons[i].abilities[0].icon}</p>
</div>
<div >
<img src="${response.pokemons[i].image }" alt="我正在嘗試遍歷包含 aobject 的陣列" srcset="">
</div>
<div >
<div >
<span >${response.pokemons[i].abilities[a].icon}</span>
<span >${response.pokemons[i].abilities[a].name}</span>
<span >${response.pokemons[i].abilities[a].power}</span>
<p>${response.pokemons[i].abilities[a].description}</p>
</div>`
}}
document.querySelector("#carContainer").innerHTML =data;
}).catch((error)=>
console.log(error))
uj5u.com熱心網友回復：
正如評論中所建議的，abilities是一個物件陣列。所以我相應地更改了代碼，在能力上添加了一個內部回圈。
var response = {
"pokemons": [{
"id": 1,
"name": "germignon",
"level": 80,
"image": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png",
"abilities": [{
"name": "vampigrain",
"icon": "??",
"power": 60,
"description": "Pokem ipsum dolor sit amet Technical Machine Shuckle Magneton Earthquake Marsh Badge Raichu. Dragon Pokemon Fan Club Chairman Golem Dodrio Psychic to denounce the evils of truth and love Marshtomp. Earth Badge Shuckle Mew Celadon Department Store Snorlax"
}],
"background_color": "#E0ED94"
},
{
"id": 2,
"name": "kaiminus",
"level": 28,
"image": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/5.png",
"abilities": [{
"name": "foam",
"icon": "??",
"power": 30,
"description": "Pokem ipsum dolor sit amet Technical Machine Shuckle Magneton Earthquake Marsh Badge Raichu. Dragon Pokemon Fan Club Chairman Golem Dodrio Psychic to denounce the evils of truth and love Marshtomp. Earth Badge Shuckle Mew Celadon Department Store Snorlax"
},
{
"name": "hydrocannon",
"icon": "??",
"power": 150,
"description": "Pokem ipsum dolor sit amet Technical Machine Shuckle Magneton Earthquake Marsh Badge Raichu. Dragon Pokemon Fan Club Chairman Golem Dodrio Psychic to denounce the evils of truth and love Marshtomp. Earth Badge Shuckle Mew Celadon Department Store Snorlax"
}
],
"background_color": "#A1E3FF"
},
]
}
var data = ""
response.pokemons.map((value) => {
var html_abilities = "";
value.abilities.forEach(function(ability) {
html_abilities = `
<div >
<span >${ability.name}</span>
<span >${ability.icon}</span>
<span >${ability.power}</span>
<p>${ability.description}</p>
</div>
`;
})
data = `
<div id="${value.id}" style="background-color: ${value.background_color }">
<div >
<p >${value.name }</p>
<p > Niv.${value.level }${value.abilities.icon}</p>
</div>
<div >
<img src="${value.image }" alt="我正在嘗試遍歷包含 aobject 的陣列" srcset="">
</div>
<div>
<div >
${html_abilities}
</div>
</div>
</div>
`
});
document.querySelector("#carContainer").innerHTML = data;<div id="carContainer"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/537309.html