Using Axios and Pokemon API to display more than one Pokemon of same type-CodePudding

so I'm trying to randomly generate a Pokemon and then five more Pokemon of the same type to display on a web page. So far, this is what I have:

const pokemonName = document.querySelector(".pokemon-name");
const pokemonImage = document.querySelector(".pokemon-image");

function getPokemon() {
  const pokemonArr = []
  const random = Math.floor(Math.random() * 256   1)
  axios.get("https://pokeapi.co/api/v2/pokemon/1"   random)
  .then(function (response) {
    pokemonName.innerHTML = response.data.forms[0].name;
    pokemonImage.src = response.data.sprites.front_default;
    pokemonArr.push(pokemonName.innerHTML)
  })
  .catch(function (error) {
    pokemonName.innerHTML = "An error has occurred.";
    pokemonImage.src = "";
  });
}

I've managed to display a Pokemon although it's still finnicky. My thought process was to append the name and image to an array or object but I'm having issues trying to apply that logic. This is my first time being introduced to the concept of APIs and using Axios. Would I be able to use a loop? How do I even go about comparing the types of Pokemon in the API?

Pokemon API: https://pokeapi.co/

CodePudding user response：

https://replit.com/@heyitsmarcus/PokemonContainer#index.html

Above is a demo of the code explanation below.

If you want to fill with X amount of Pokemon on your page, you're on the right track to use classes. But, you need to utilize the querySelectorAll functionality to take advantage of your classes. This will allow you to run a for loop on the classes and pick a different pokemon for each matching selector. You really want to have a pokemon-container class, for example, that houses your pokemon-name and pokemon-image classes individually like so:

<div >
    <div ></div>
    <img  src="">
</div>
<div >
    <div ></div>
    <img  src="">
</div>
<div >
    <div ></div>
    <img  src="">
</div>

Repeat this for the number of pokemon you want to see. Then, you can run a for loop on the 3 pokemon-container classes to see 3 random pokemon while still using the same names you had before. The difference is, you just want to run a querySelector to grab the specific individual pokemon names and images for that container. This results in 3 random pokemon each time! =]

function getNewPokemon() {
    //this loop grabs every pokemon container individually
    const pokemonContainers = document.querySelectorAll('.pokemon-container');

    for (const container of pokemonContainers) {
        //Grab this specific container's pokemon name element
        const pokemonName = container.querySelector('.pokemon-name');

        //Grab this specific container's pokemon image element
        const pokemonImage = container.querySelector('.pokemon-image');

        //Get your random integer
        const random = Math.floor(Math.random() * 256   1);

        //also I removed the 1 from after the final slash because you're excluding pokemon by including that 1 in the URL
        //and you can just use the natural JavaScript "fetch"
        //there's really no need for a whole library for a request like this
        axios.get(`https://pokeapi.co/api/v2/pokemon/${random}`)
        .then(json => {
            pokemonName.innerHTML = json.data.forms[0].name;
            pokemonImage.src = json.data.sprites.front_default;
        })
        .catch(error => {
            console.error('error in request', error);
            pokemonName.innerHTML = "An error has occurred.";
            pokemonImage.src = "";
        })
    }
}