Fetching the original Pokemon using the Poke API

One of the main things I wanted to learn when joining Flatiron was how to manipulate an API and use that data to make a web application. One of the main API’s I wanted to use was the Pokemon API. To my surprise everyone who I talked to in reference to the Pokemon API has told me it is such a hassle to work with. Since it is a nested API and you will have to make multiple calls with it.

First thing is reading through the docs of the Poke API (https://pokeapi.co/docs/v2.html) to get an understanding of how to make the API calls and how to get/extract the data that you need. Just like any other API the Poke API does have a lot of data that I will not be using.

Overview

I will be making a small application that shows the original 151 Pokemon on a single page. Every Pokemon will have a card like styling. Every Pokemon card will have the name, picture, their number, and their type. I will be using Semantic to generate the card stylings.

The set up for this application will consist of one HTML file, a JavaScript file and a CSS file. I will be fetching the data from the API and will be using DOM manipulation to create the individual cards.

Starting to code out the Application

First fetch will be too ‘https://pokeapi.co/api/v2/pokemon?limit=151', luckily the Poke API lets us pass in a query parameter which is ‘limit’ which just like the name suggests lets us limit the Pokemon to 151 which is exactly what we are looking to do.

function fetchKantoPokemon(){
  fetch(‘https://pokeapi.co/api/v2/pokemon?limit=151')
  .then(response => response.json())
  .then(allpokemon => console.log(allpokemon))
}

Console.log the data returned from the API fetch.

First thing I like to do is to console.log the data I received from the API to make sure it is what I think it is. From the examples above you can see the console does log all 151 Pokemon in an array. Unfortunately it looks like this first call only gave us the name of the Pokemon and another url for every Pokemon dataset. Another fetch has to be made to every Pokemon’s url to get their data(type, number, etc). For example if we wanted to get Bulbasaur’s info another fetch call will have to be made to the following url https://pokeapi.co/api/v2/pokemon/1/. Since the info is in an array of hashes, a method can be made that will go trough that array and make the fetch calls to those URLs.

function fetchKantoPokemon(){
 fetch('https://pokeapi.co/api/v2/pokemon?limit=151')
  .then(response => response.json())
  .then(function(allpokemon){
  allpokemon.results.forEach(function(pokemon){
    fetchPokemonData(pokemon); 
  })
 })
}

In the above code example, it is now going through every Pokemon in the results array using the forEach method and the hash ( hash example: {name: “bulbasaur”, url: “https://pokeapi.co/api/v2/pokemon/1/“} ) is being sent to the fetchPokemonData function, which is where we will make the second fetch call to get the details of every Pokemon.

function fetchPokemonData(pokemon){
let url = pokemon.url // <--- this is saving the pokemon url to a      variable to us in a fetch.(Ex: https://pokeapi.co/api/v2/pokemon/1/)
  fetch(url)
  .then(response => response.json())
  .then(function(pokeData){
  console.log(pokeData)
  })
}

In the above code example the fetchPokemonData method is taking in a Pokemon hash as the parameter. It saved the pokemon.url to a variable which we use in the fetch call. Again I used console.log to make sure it is receiving the right data which in this case is the data in the screenshot below.

Example of the data received for when a fetch call is made for an individual Pokemon.

Now that we know the data is coming in the right way we can start to extract the data from the hash and start printing it out to the HTML.

function renderPokemon(pokeData){
let allPokemonContainer = document.getElementById('poke-container');
let pokeContainer = document.createElement("div") //div will be used to hold the data/details for indiviual pokemon.{}

let pokeName = document.createElement('h4')
pokeName.innerText = pokeData.name
let pokeNumber = document.createElement('p')
pokeNumber.innerText = `#${pokeData.id}`

let pokeTypes = document.createElement('ul') 
//ul list will hold the pokemon types
createTypes(pokeData.types, pokeTypes) 
// helper function to go through the types array and create li tags for each one
pokeContainer.append(pokeName, pokeNumber, pokeTypes);   
//appending all details to the pokeContainer div
allPokemonContainer.appendChild(pokeContainer);       
//appending that pokeContainer div to the main div which will                                                             hold all the pokemon cards
}

In the following code example above all of the HTML elements were made and the inner text of each one was assigned to the Pokemon data which we passed in as a parameter. At the end of the function we are appending all the elements to the container DIV for it to show on the DOM. We also used a helper method called createTypes for the types of every Pokemon, since the types came in as an array for those Pokemon that have more than one type. In the function we use a forEach to go through every type in an array, create a new Li(list item) element, make the inner text of that Li to the type name and append that Li to the Ul(unordered list). Code shown below.

function createTypes(types, ul){
  types.forEach(function(type){
  let typeLi = document.createElement('li');
  typeLi.innerText = type['type']['name'];
  ul.append(typeLi)
  })
}

Data now being rendered to the DOM (HTML page)

Finally some info is now being shown on the HTML! In the screenshot shown above. However, it looks like we are missing the image for the Pokemon. The Poke API does have sprites it can render but they show a bit small and the sprites have an old school feel to them. For the images we will be using the https://pokeres.bastionbot.org Pokemon (Pokeres) API. To use their API you would usually have to require some headers but luckily since we are only getting the images from them we do not need to add any headers or make a fetch call.

For each Pokemon we will be creating a new image tag, setting the source to the pokers url and appending that image tag to the container DIV. For example setting the image source to https://pokeres.bastionbot.org/images/pokemon/1.png will give us an image of Bulbaser. Code shown below.

function createPokeImage(pokeID, containerDiv){
  let pokeImage = document.createElement('img')
  pokeImage.srcset =    `https://pokeres.bastionbot.org/images/pokemon/${pokeID}.png`
  containerDiv.append(pokeImage);
}

Now the images are loaded for each Pokemon.

And that is it! The HTML page is now showing the Pokemon name, number, types and the picture. Now with some Semantic classes we will turn it into a more visually appealing page. I will not go through the styling process but if you need to reference it you can check the GitHub linked at the bottom of the post. You can choose not to use semantic and style it in your own way with another CSS framework.

Github Repo : https://github.com/Nihaprezz/kanto-pokemon

Example of how my page came to look with Semantic UI’s minimalist styling.