problem to get an element from an array , javascript API-CodePudding

i'm learning javascript and got a problem when i want to fetch some information on the Pokemon API ^^ I can fetch some information but i want to get the second types of Pokemon, as you can see, it's working for the first type but not the second.

I think the problem is that not all the pokemon got 2 types ("apiTypes"), but i don't know how to render the second one. Thanks for your helping and sorry for my english ;)

The JSON : https://pokebuildapi.fr/api/v1/pokemon

/ https://pokebuildapi.fr/api/v1/pokemon

[
  {
    "id": 1,
    "pokedexId": 1,
    "name": "Bulbizarre",
    "image": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/1.png",
    "sprite": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png",
    "slug": "Bulbizarre",
    "stats": {
      "HP": 45,
      "attack": 49,
      "defense": 49,
      "special_attack": 65,
      "special_defense": 65,
      "speed": 45
    },
    "apiTypes": [
      {
        "name": "Poison",
        "image": "https://static.wikia.nocookie.net/pokemongo/images/0/05/Poison.png"
      },
      {
        "name": "Plante",
        "image": "https://static.wikia.nocookie.net/pokemongo/images/c/c5/Grass.png"
      }
    ],

My actual code when i put <img src="${pokemon.apiTypes[0].image}" id="type">, it's rendering the first type. but if i put <img src="${pokemon.apiTypes[1].image}" id="type">, it doesn't render the second one

const pokemonContainer = document.querySelector('.pokemon-container')
let pokemonData = []

async function fetchPokemon(){
await fetch("https://pokebuildapi.fr/api/v1/pokemon")
.then((res) => res.json())
.then((data) => pokemonData = data);

console.log(pokemonData);

pokemonDisplay()
};

function pokemonDisplay(){
    pokemonContainer.innerHTML = pokemonData
    .map((pokemon) => 
    
    `
    <div >
    <h2>#${pokemon.id}  ${pokemon.name}</h2>
    <img src="${pokemon.image}" id="pic">
    <img src="${pokemon.apiTypes[0].image}" id="type">
    <ul>
    <li>PV  ${pokemon.stats.HP}</li>
    <li>Att  ${pokemon.stats.attack}</li>
    <li>Def  ${pokemon.stats.defense}</li>
    </ul>
    </div>
    `
    
    ).join("")};

window.addEventListener('load', fetchPokemon);

CodePudding user response：

You have to check whether pokemon.apiTypes[1].image exists:

const pokemonContainer = document.querySelector('.pokemon-container');
let pokemonData = [];

async function fetchPokemon(){
await fetch("https://pokebuildapi.fr/api/v1/pokemon")
.then((res) => res.json())
.then((data) => pokemonData = data);

pokemonDisplay()
}

function pokemonDisplay(){
    pokemonContainer.innerHTML = pokemonData
    .map((pokemon) => 
    
    `
    <div >
    <h2>#${pokemon.id}  ${pokemon.name}</h2>
    <img src="${pokemon.image}" >
    <img src="${pokemon.apiTypes[0].image}" >`  
    (pokemon.apiTypes[1]?.image ? `<img src="${pokemon.apiTypes[1].image}" >` : '')  
    `<ul>
    <li>PV  ${pokemon.stats.HP}</li>
    <li>Att  ${pokemon.stats.attack}</li>
    <li>Def  ${pokemon.stats.defense}</li>
    </ul>
    </div>
    `
    
    ).join("")};

window.addEventListener('load', fetchPokemon);

I also replaced all IDs with classes, because IDs have to be unique.