Quiero mostrar cada pokemon traído de la pokeapi. Al tener que hacerlo con un ID, se creó un bucle para recorrer estos ID. Para luego mostrarlos con la función createPokemonCard y obtener sus datos prediseñados y sumarlos al html... El problema es que en vez de mostrarme a cada uno de los pokemons recorridos, cada tarjeta creada "pisa", se pone encima, de la anterior. De esta manera, una vez que el bucle finaliza en el nro. indicado, sólo muestra el pokemon respectivo al ID último.
const getPokemons = id => {
let url = `https://pokeapi.co/api/v2/pokemon/${id}`;
fetch(url)
.then((data) => data.json())
.then((pkmdata) => {
let pokemonesGenerados = [pkmdata];
pokemonesGenerados.forEach( (pokemonGenerado, index) => {
console.log(index, pokemonGenerado);
createPokemonCard(pokemonGenerado);
});
});
};
const fetchPokemons = (number) => {
for (let i=1; i <= number; i++){
getPokemons(i);
// console.log(i);
}
};
fetchPokemons(12);
De esta forma, siempre que el bucle finaliza, en pantalla termina la tarjeta de butterfree:(
const createPokemonCard = data => {
const sprite = data.sprites.front_default;
const { stats, types } = data;
pokeImg.setAttribute('src', sprite);
pokeNumberId.textContent = `#${data.id.toString().padStart(3, 0)}`;
pokeName.textContent = data.name;
pokeTypesContainer(types);
pokeStatsContainer(stats);
};