30 Days Of JavaScript

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.

If you don't have it installed then do yourself a favour and install the JSON Formatter Chrome extension to make viewing JSON data a lot nicer.

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?

Outline

Go Pro?

If you upgraded to pro, sign in here

  • About
  • Blog
  • Privacy
Looking to email me? You can get me on my first name at allthecode.co