0

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);


    };

1 respuesta 1

0

bienvenido a SO. al parecer estas usando la funcion insertAdjacentHTML, pero no de la manera en que la documentación lo indica aquí de modo que deberia quedar algo como esto :

pokeCard.insertAdjacentHTML('beforeend', createPokemonCard(pokemonGenerado)); 

Claro siempre y cuando tu función createPokemonCard devuelva un string

7
  • Hola! muchas gracias! Por más que use insertAdjacentHTML, puedo dar con el mismo resultado sustituyéndolo por: createPokemonCard(pokemonGenerado); ya que createPokemonCard devuelve datos del fetch. De todas formas, el problema persiste. No sé por qué no muestra todos los elementos recorridos del array con la función createPokemonCard y simplemente queda el último luego de hacer el recorrido.
    – panchezko
    el 8 abr. 2022 a las 16:08
  • @panchezko Agrega a tu pregunta el código de la función0 createPokemonCard, y como has definido pokeCard.
    – Csharls
    el 8 abr. 2022 a las 16:29
  • el problema es que el índice de cada elemento del array me lo devuelve en la posición 0. Por eso cada tarjeta de pokemon se pisa sobre la anterior, quedando como resultado final el último elemento del bucle...
    – panchezko
    el 8 abr. 2022 a las 16:30
  • @panchezko En ese caso tu problema puede ser en esta linea ` let pokemonesGenerados = [pkmdata];` prueba [...pkmdata]
    – Csharls
    el 8 abr. 2022 a las 16:33
  • ahí modifiqué el .then con un forEach. Por consola cada elemento lo muestra... Cada elemento tiene de índice 0 (no sé por qué) y esto hace que se pisen simultáneamente las tarjetas siguiendo el bucle...
    – panchezko
    el 8 abr. 2022 a las 16:41

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.