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?