Day 26: Making a PokeDex

Lesson 2: PokeDex 2

Let's start with loading the Pokemon list from the API.

1const baseAPI = "https://pokeapi.co/api/v2/";
2const flexContainer = document.getElementById("flex-container");
3const placeholder = document.getElementById("placeholder");
4
5const getPokemonList = () => {
6  fetch(`${baseAPI}pokemon?limit=20&offset=0`)
7    .then((res) => res.json())
8    .then((data) => {
9      let fetchedPokemon = data.results;
10      console.log(fetchedPokemon);
11
12      // more code
13    });
14};
15
16getPokemonList();

This sets up the base url for the api, grabs reference to the two DOM elements we will need, declares a function to fetch the data from the PokeAPI and then logs out the results. Then finally it calls that function.

Take a look in your console and you should see a 20 item array with each item looking like this:

1{
2  "name": "bulbasaur",
3  "url": "https://pokeapi.co/api/v2/pokemon/1/"
4}

So we get the name but we don't get anything else, just a URL to get more information from. If you visit that URL in your browser, you will see that it returns a lot of information.

From this mass of data there are a few things we want:

• Image, found in sprites.front_default
• Stats, found in stats array
• Types, found in types array
• Weight, found at the end as simply weight

But we need to make a second request per Pokemon to get this data, so how do we do that?