im trying to to render some pokemon cards with data that i bring from an API (pokemonAPI). Im able to bring all the data that i need from the APi, exept for the type and abilities. But that is not the main probles, as i already bring the most important data that i needed. My problem comes inside the foreach that is un the renderPokemons function. Any clue of might i may solve this?
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
does not exist in data
. That path exists in the original data, but not the object created in the event listener. It only has name, weight, height, and image
. Changing it to data.image
will work.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.