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");
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);
12      // more code
13    });

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:

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

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?


Go Pro?

Upgrade to Pro for quizzes, tracked progress and a completion certificate for just $25 🚀

Want more developer tips, tricks and tools?
Then follow me:
FREE Coding Career Quick Start Guide 🚀
Discover the best way to learn to code, how to land a job and valuable resources to help your journey in this free 15 page value packed guide.
Looking to email me? You can get me on my first name at allthecode.co