如何解决使用我从 API 带来的数据呈现卡片时出现问题
我试图用我从 API (pokemonAPI) 带来的数据渲染一些 pokemon 卡片。 我能够从 APi 中获取我需要的所有数据,除了类型和能力。 但这不是主要问题,因为我已经带来了我需要的最重要的数据。 我的问题出现在不是 renderPokemons 函数的 foreach 中。我可以解决这个问题的任何线索吗?
const getAllPokemons = async (url) => {
try {
const pokemons = await fetch(url);
return pokemons.json()
}catch (e) {
console.log(e)
}
}
const getSinglePokemon = async (url) => {
try {
const pokemon = await fetch(url);
return pokemon.json()
}catch (e) {
console.log(e)
}
}
document.addEventListener('DOMContentLoaded',async (ev)=> {
const URL = 'https://pokeapi.co/api/v2/pokemon';
const pokemons = await getAllPokemons(URL);
const pomekonDataPromises = pokemons.results.map (async pokemon => {
const pokeTemp = await getSinglePokemon(pokemon.url)
return {
name: pokemon.name,weight : pokeTemp.weight,height : pokeTemp.height,// type: pokeTemp.types.type.name,image : pokeTemp.sprites.other.dream_world.front_default,}
})
const pokemonjson = await Promise.all (pomekonDataPromises)
console.log(pokemonjson)
const parentContainer = document.querySelector('.containerCards');
renderPokemons(parentContainer,pokemonjson);
})
////FUNCTION TO RENDER POKEMONS
const renderPokemons = (parent,apiResponse) => {
apiResponse.forEach((data) => {
const parentTemplate = document.createElement('div');
parentTemplate.innerHTML=`<div class="card" style="width: 18rem;">
<img class="img card-img-top" src="${data.sprites.other.dream_world.front_default}" alt="Pokemon image">
<div class="card-body">
<h5 class="name card-title">Name:</h5>
<p class="weight card-text">Weight: </p>
<p class="height card-text">Height: </p>
</div>
</div>`
parent.appendChild(parentTemplate)
});
}
解决方法
sprites.other.dream_world.front_default
在 data
中不存在。该路径存在于原始数据中,但不存在于事件侦听器中创建的对象中。它只有name,weight,height,and image
。将其更改为 data.image
会起作用。
const getAllPokemons = async(url) => {
try {
const pokemons = await fetch(url);
return pokemons.json()
} catch (e) {
console.log(e)
}
}
const getSinglePokemon = async(url) => {
try {
const pokemon = await fetch(url);
return pokemon.json()
} catch (e) {
console.log(e)
}
}
document.addEventListener('DOMContentLoaded',async(ev) => {
const URL = 'https://pokeapi.co/api/v2/pokemon';
const pokemons = await getAllPokemons(URL);
const pomekonDataPromises = pokemons.results.map(async pokemon => {
const pokeTemp = await getSinglePokemon(pokemon.url)
return {
name: pokemon.name,weight: pokeTemp.weight,height: pokeTemp.height,// type: pokeTemp.types.type.name,image: pokeTemp.sprites.other.dream_world.front_default
}
})
const pokemonJson = await Promise.all(pomekonDataPromises)
const parentContainer = document.querySelector('.containerCards');
renderPokemons(parentContainer,pokemonJson);
})
////FUNCTION TO RENDER POKEMONS
const renderPokemons = (parent,apiResponse) => {
apiResponse.forEach((data) => {
const parentTemplate = document.createElement('div');
parentTemplate.innerHTML = `<div class="card" style="width: 18rem;">
<img class="img card-img-top" src="${data.image}" alt="Pokemon image">
<div class="card-body">
<h5 class="name card-title">Name: ${data.name}</h5>
<p class="weight card-text">Weight: ${data.weight}</p>
<p class="height card-text">Height: ${data.height}</p>
</div>
</div>`
parent.appendChild(parentTemplate)
});
}
<div class="containerCards"></div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。