Reading the Response

Using Information from the Response

Let's take another look at the example response. Recall that this is the response received after using the ../pokemon-species/eevee method of the API.

In order to populate our web-based Pokédex, we will need to decide which pieces of information we'll need to extract from this response block. Although you can personally choose to display any of these results, for the purposes of this demo we will be extracting the following: name, number, genus, description, and type. Furthermore, we will append an image of the Pokémon to our Pokédex entry.

Let's do an example. Let's say we want to extract the name object from the JSON response. Now, the members of the response may be either single-entries or an array of values. The name member is an array because the Pokémon has a different name depending on the langauge setting of the game. In any case, the Pokémon's English name is always in the names array at index 0. Within names[0], we must access the name member to obtain the text entry of the Pokémon's name. Thus, if we were to create a variable that carries all the response information, var response, then we can access the name of the Pokémon by calling: response.names[0].name In the demo Pokédex this is exactly what we do.

Demo Code Walkthrough

Let's take a look at another section of our example code:

In the JavaScript block beginning with req.onload = function(), we are able to see the rest of the AJAX call. On a successful function call, this code uses DOM to dynamically generate new td elements within a predesignated HTML table which are populated with the Pokémon's data entries.

Let's examine the code line starting with var matrix2 = doc.createElement('td'). This code obtains the Pokémon's name from the JSON response, like the example above, and displays it in a dynamically generated table data entry. In this case, matrix2 holds the Pokémon's name. In this code, the following data are added into our dynamic table:

1. matrix1: Contains the Pokémon's National Dex number.
2. matrix2: Contains the Pokémon's name.
3. matrix3: Contains the Pokémon's genus.
4. matrix4: Contains the Pokémon's in-game description.

Note that we are missing two data fields that are necessary for our demo Pokédex. These are the Pokémon's type and an image of the Pokémon. The reason why these are missing is because the ../pokemon-species method does not contain this information. Thus, we need to make a second API call in order to obtain this data and complete our Pokédex. Note that during a successful API call, the last line of code in the function is to call pokemon2API();.

Making a Second API Call

Here's the code for pokemon2API():

You'll notice that the basic structure for ths second call is the same as the first. However, in this call we are using var address = "http://pokeapi.co/api/v2/pokemon/ - the pokemon method instead of the pokemon-species method. The pokemon method includes information about the Pokémon's typing, and also includes the address of its image location. Using this second function, we then append two more columns to our table. The first, matrix5, gets the Pokémon's type and displays it in a table column. Some Pokémon have two types instead of one, and we use the isDoubleTyped boolean to determine what our text output should look like. The second column, matrix6, takes the address of the Pokémon's front-facing normal picture and displays it to the table.

What's Next?

We've learned how to make GET requests to the PokéAPI and how to obtain information from the JSON responses we receive. With this information, now we can finally set up and start using our web-based dynamic Pokédex!