我试图循环通过一个数组包含一个对象

Question

我试图创建一个循环来显示每个元素从api使用fetch然而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"
},

和我在访问"能力"在宠物小精灵有谁能帮忙吗?

i have try this:

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  class="Card" id="${value.id}" style="background-color: ${value.background_color }" >
<div class="header"> <p class="name">${value.name }</p>
<p class = "level" > Niv.${value.level }${value.abilities.icon}</p>
</div>
<div class="image">
<img src="${value.image }" alt="" srcset="">
</div>
<div >
<div class="abilities" >
<span class="AbIcon">${value.abilities.name}</span>
<span class="AbName">${value.abilities.icon}</span>
<span class="AbLevel">${value.abilities.power}</span>  
<p>${value.abilities.description}</p>
</div>
</div>`

});
document.querySelector("#carContainer").innerHTML =data;

}).catch((error)=>
console.log(error))

但它不起作用。我不能在它返回的能力中显示任何东西

嵌套for lop I have try

let data=" ";
for(var i = 0; i < response.pokemons.length; i++) {
for(var a = 0; a < response.pokemons[i].abilities.length; a++) {
data+= `<div class="carConainer">
<div  class="Card" id="${response.pokemons[i].id}" style="background-color: ${response.pokemons[i].background_color }" >
<div class="header"> <p class="name">${response.pokemons[i].name }</p>
<p class = "level" > Niv.${response.pokemons[i].level }${response.pokemons[i].abilities[0].icon}</p>
</div>
<div class="image">
<img src="${response.pokemons[i].image }" alt="" srcset="">
</div>


<div >
<div class="abilities" >
<span class="AbIcon">${response.pokemons[i].abilities[a].icon}</span>
<span class="AbName">${response.pokemons[i].abilities[a].name}</span>
<span class="AbLevel">${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))

Answer 1

如注释所示，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 class="ability">
<span class="AbIcon">${ability.name}</span>
<span class="AbName">${ability.icon}</span>
<span class="AbLevel">${ability.power}</span>
<p>${ability.description}</p>
</div>
`;
})

data += ` 
<div class="Card" id="${value.id}" style="background-color: ${value.background_color }">
<div class="header">
<p class="name">${value.name }</p>
<p class="level"> Niv.${value.level }${value.abilities.icon}</p>
</div>
<div class="image">
<img src="${value.image }" alt="" srcset="">
</div>
<div>
<div class="abilities">
${html_abilities}
</div>
</div>
</div>  
`

});
document.querySelector("#carContainer").innerHTML = data;

<div id="carContainer"></div>