es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Mostrar un elemento sólo si los datos proporcionados por la API existen.

06 Aug, 2023 Programación

Estoy utilizando Pokeapi y quiero mostrar los tipos del pokemon en 2 elementos diferentes porque estoy aplicando un estilo (el color de fondo) de acuerdo al tipo del pokemon. El problema es que muestra los primeros 3 pokemon pero no el cuarto porque solo tiene un tipo y no puede encontrar el segundo tipo (que no existe) en los datos proporcionados por la api.

Aquí está mi JS:

function displayPokemon (pokemon) {
    const pokemonEl = document.createElement('li');
    const name = pokemon.name;
    const type1 = pokemon.types[0].type.name;
    const type2 = pokemon.types[1].type.name;
    const pokemonHTMLString =
        `
        <div class="pokemon_container ${type1} ${type2}">
            <div class="pokemon_container_image">
                <img class="pokemon_container_image_sprite" src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon.id}.png" loading="lazy" alt="${name}">
                <img class="pokemon_container_image_shiny" src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/${pokemon.id}.png" loading="lazy" alt="${name}">
            </div>
            <h3 class="pokemon_number">#${pokemon.id.toString().padStart(3, '0')}</h3>
            <h2 class="pokemon_name" onclick="selectPokemon(${pokemon.id})">${name}</h2>
            <a class="pokemon_type" id="${type1}">
                <img id="${type1}" alt="${type1}">
                <span>${type1}</span>
            </a>
            <a class="pokemon_type" id="${type2}">
                <img id="${type2}" alt="${type2}">
                <span>${type2}</span>
            </a>
        </div>
    `;
    pokemonEl.innerHTML = pokemonHTMLString;
    pokedex.appendChild(pokemonEl);
};

Aquí está el error: “Uncaught (in promise) TypeError: pokemon.types[1] is undefined”

Antes de eso, estaba mapeando los tipos y mostrándolos en un solo elemento, pero quiero hacerlo en 2 elementos separados y no sé si mi código está mal y tengo que modificar algo o si tengo que crear una función o una declaración if else.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que el error se produce al intentar acceder a pokemon.types[1] incluso si no existe. Puede modificar su código para verificar si pokemon.types[1] existe antes de acceder a él.

    Una opción es utilizar una declaración if para verificar la longitud del arreglo types, de la siguiente manera:

    function displayPokemon (pokemon) {
    const pokemonEl = document.createElement('li');
    const name = pokemon.name;
    const type1 = pokemon.types[0].type.name;
    const type2 = pokemon.types.length > 1 ? pokemon.types[1].type.name : '';
    const pokemonHTMLString =
        `
        <div class="pokemon_container ${type1} ${type2}">
            <div class="pokemon_container_image">
                <img class="pokemon_container_image_sprite" src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon.id}.png" loading="lazy" alt="${name}">
                <img class="pokemon_container_image_shiny" src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/${pokemon.id}.png" loading="lazy" alt="${name}">
            </div>
            <h3 class="pokemon_number">#${pokemon.id.toString().padStart(3, '0')}</h3>
            <h2 class="pokemon_name" onclick="selectPokemon(${pokemon.id})">${name}</h2>
            <a class="pokemon_type" id="${type1}">
                <img id="${type1}" alt="${type1}">
                <span>${type1}</span>
            </a>
            <a class="pokemon_type" id="${type2}">
                <img id="${type2}" alt="${type2}">
                <<span>${type2}</span>
            </a>
        </div>
    `
    pokemonEl.innerHTML = pokemonHTMLString;
    pokedex.appendChild(pokemonEl);
};

    En este código, verificamos si la longitud del arreglo types es mayor que 1, y si es así, establecemos type2 como pokemon.types[1].type.name. De lo contrario, lo establecemos como una cadena vacía.

    De esta manera, si el pokémon solo tiene un tipo, type2 será una cadena vacía y el código no generará un error al intentar acceder a pokemon.types[1].

Comments are closed.