0

Me encuentro aprendiendo el tema de las API, y me encontré con el siguiente problema: Estoy usando la API de pokemón https://pokeapi.co/api/v2/pokemon , y dentro del objeto result hay una URL y dentro de la URL está el dato que necesito (para ser exacto la imagen del pokemón). ¿Cómo puedo lograr usar la imagen de cada pokemón si quiero hacer cards con toda la primera lista de la api?
Aquí va mi código HTML (No todo):

Trabajé utilizando la etiqueta template.

    <template class="templateCard">

        <div class="card shadow col-12 col-md-6 col-lg-3 m-5">
            <img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/1.svg"
                class="card-img rounded-circle" alt="">
            <div class="card-body">
                <h1 class="text-center"> Nombre estático </h1>
            </div>
        </div>

    </template>

Aquí va mi código JScript:

La parte comentada indica un intento fallido de obtener la imagen)

const card = document.querySelector('#padre');
const template = document.querySelector('.templateCard').content;


document.addEventListener("DOMContentLoaded", () => {
    fetchData();
});

const fetchData = async () => {
    const api = "https://pokeapi.co/api/v2/pokemon/";
    try {
        const res = await fetch(api);
        const data = await res.json();
        // console.log(data.sprites)
        pintarPokemon(data);
    } catch(error){
        console.log(error);
    }
};



const pintarPokemon = (data, data1) => {
    console.log(data1);
    const fragment = document.createDocumentFragment();
    data.results.forEach((item) => {
        const clone = template.cloneNode(true);
        // clone.querySelector('.card-img').setAttribute("src", item.url.sprites.back_shiny);
        clone.querySelector('.text-center').textContent = item.name;
        fragment.appendChild(clone);
    });
    card.appendChild(fragment);
};

Debería verse algo así, pero con la respectiva imagen del pokemón:
Debería verse algo así, pero con la respectiva imagen del pokemón

1 respuesta 1

1

Revisa bien los datos que vuelven de la API...haciendo una llamada rápida en postman puedo ver que ese endpoint te devuelve una lista de pokemon con dos datos: nombre (item.name) y un url del pokemon específico en el API (item.url)... item.url.sprites.back_shiny no existe.

Para hacer lo que quieres, necesitas hacer una llamada al API por cada pokemon. Hice algo así hace poco, te dejo mi código:


const colors = {
    fire: '#FDDFDF',
    grass: '#DEFDE0',
    electric: '#FCF7DE',
    ...
}

const fetchPokemons = async () => {
    for (let i=1; i <= pokemon_count; i++) {
        await getPokemon(i)
    }
}

const getPokemon = async (id) => {
    const url = `https://pokeapi.co/api/v2/pokemon/${id}`;
    const res = await fetch(url);
    const data = await res.json();
    createPokemonCard(data);
}

const createPokemonCard = (pokemon) => {
    const pokemonEl = document.createElement('div');
    pokemonEl.classList.add('pokemon');

    const name = pokemon.name[0].toUpperCase() + pokemon.name.slice(1);
    const id = pokemon.id.toString().padStart(3, '0');
    const types = pokemon.types.map(type => type.type.name);
    const type = main_types.find(type => types.indexOf(type) > -1);
    const color = colors[type];
    
    const pokemonInnerHTML = `
    <div class="img-container">
        <img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon.id}.png"" alt="${pokemon.name}">
    </div>
    <div class="info">
        <span class="number">#${id}</span>
        <h3 class="name">${name}</h3>
        <small class="type">Type: <span>${type}</span> </small>
    </div>
    `;

    pokemonEl.style.backgroundColor = color;
    pokemonEl.innerHTML = pokemonInnerHTML;
    poke_container.appendChild(pokemonEl);
}

fetchPokemons();

También lo puedes ver en el repo.

Tu Respuesta

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

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