[英]React - Cards are not rendering as I am calling for the data in this API
[英]Problem rendering cards with data that i bring from an API
我试图用我从 API (pokemonAPI) 带来的数据来渲染一些 pokemon 卡。 我能够从 APi 带来我需要的所有数据,除了类型和能力。 但这不是主要问题,因为我已经带来了我需要的最重要的数据。 我的问题来自renderPokemons function的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
中不存在。 该路径存在于原始数据中,但不存在于事件侦听器中创建的 object。 它只有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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.