Day 27: Making A PokeDex: Day 2

Lesson 2: PokeDex 6

When we click on a Pokemon we want to show a modal with a larger image and some more information. Right now though we have a big flaw stopping this.

You see the only place we are storing the Pokemon data that comes back from the fetch calls is in the DOM. At no point do we store the data. So when we show the modal, there's no where for us to get the data we have already loaded. Now, we could refetch it from the Pokemon API but that's very wasteful.

Instead, we will store the data in memory and grab what we need when the user clicks on a Pokemon.

To do that add a new variable to the top of your JS just below page:

1let pokemonArray = [];

Then in getPokemonList add this line right before addCard(data);:

1pokemonArray.push(data);
2
3console.log(pokemonArray);

You can see this populate in the log as each Pokemon is fetched from the API.

Now we have a record of all the Pokemon we have fetched and can look up the details as needed.