loading...
Cover image for Gotta Fetch Em' All from the PokéAPI

Gotta Fetch Em' All from the PokéAPI

christinamcmahon profile image Christina ・3 min read

Seeing as I’m a lifetime Pokémon fan, I have dreamed of making a Pokémon app of some sort since I started programming. Now that I am learning about manipulating APIs, I am excited for the chance to work with the PokéAPI for my own project which uses a Rails API backend and React frontend. During my setup of the backend, I was surprised to not find any tutorials for using the PokéAPI with Ruby. Keep reading to learn from my mistakes and get to making your Pokémon app sooner!

First Things First

As always, the first step when using an API is to read its documentation. I found the PokéAPI documentation enjoyable to read and experiment with and the available data is extensive. The most common complaint about the PokéAPI is that it is a nested API and that you have to make multiple calls with it. This definitely caused some difficulties for me as well but now that I figured it out, I wanted to share my tips with you so that you don’t have to go through the same struggle.

Before you move on, I recommend figuring out exactly what data you will be needing and where to find it. For example, I wanted access to the first generation of Pokémon (#001-151). More specifically, I wanted their species, sprites, base stats, and description. With a little bit of digging around in the docs, I found out that the data I needed would be in two different parts of the nested API. Knowing this before I started actually accessing the API was really helpful in my planning plus it helped me familiarize myself with how the API is organized.

Let’s Get Started!

Once you have your initial backend set up, we can start working with the API. Go to your seeds.rb file to get started. There are a few ways to go about this but here is how I did things…

pm_array = []
desc_array = []

for i in 1..151
  # get data (including species, sprites, and base stats) about each of the first 151 pokemon
  data = open("https://pokeapi.co/api/v2/pokemon/#{i}").read
  json_data = JSON.parse(data)
  pm_array.push(json_data)
  # get descriptions for each of the first 151 pokemon
  desc = open("https://pokeapi.co/api/v2/pokemon-species/#{i}").read
  json_desc = JSON.parse(desc)
  desc_array.push(json_desc)
end

As you can see, I initialized two empty arrays to store the data I collected from the two separate API calls made in the next few lines. If you want information on a different range of Pokémon, change the range of the for loop (right now it is 1..151 since I only want data on the first generation of Pokémon). Each number represents an individual Pokémon according to its National Pokédex number which makes it easy.

Now that we have our data, we can start creating Pokémon objects. Accessing the desired data can be a little tricky and may take some playing around with the Try It Now tool in the PokéAPI docs.

for pokemon in pm_array
  Pokemon.create(
    species: pokemon["name"],
    sprite_front: pokemon["sprites"]["front_default"],
    sprite_back: pokemon["sprites"]["back_default"],
    stat_speed: pokemon["stats"][0]["base_stat"],
    stat_special_defense: pokemon["stats"][1]["base_stat"],
    stat_special_attack: pokemon["stats"][2]["base_stat"],
    stat_defense: pokemon["stats"][3]["base_stat"],
    stat_attack: pokemon["stats"][4]["base_stat"],
    stat_hp: pokemon["stats"][5]["base_stat"],
    description: desc_array[pokemon["id"] - 1]["flavor_text_entries"][desc_array[pokemon["id"] - 1]["flavor_text_entries"].length - 1]["flavor_text"],
  )
end

The trickiest part for me was adding in the description which was stored in a separate array. My solution was to use the current Pokémon’s id - 1 to index into the description array, then within the “flavor_text_entries”, grab the last entry’s flavor text. I chose to take the last entry every time since different Pokémon had a different number of flavor texts available, most of which weren’t even in English. I noticed that the last flavor text entry was always from Pokémon Red and always in English so I went with that (plus it’s so nostalgic!).

Seeded Pokémon data in database, viewed with Postgres

Everything is set up and you are now ready to seed your data! Run rails db:seed and if you are using Postgres like I am, take a look at your data to make sure you got the right information. I hope this guide was helpful, feel free to reach out if you need any help!

Posted on Feb 10 by:

Discussion

markdown guide