Now you're going to make your own JSON object. It's going to be a simple version of a Pokémon. What you're going to need to build a basic Pokédex is listed below. I figured out this list by looking at the JSON of one Pokémon using the tool you saw on the last card.
- The Pokémon's id number
- Name of the Pokémon
- A picture of it
- Its “types” (fire, grass, water, etc.)
The Pokémon will be a kind of object, just like the ToDo was in the Intermediate JavaScript Sushi Cards. You can use a
function
to create andreturn
an object, which lets you keep all the code related to that object neatly organised together. Add this function to your code to do so:function Pokemon(pokemonIndex) { var info = pokemonInfo[pokemonIndex] this.id = info.id this.name = info.name this.image = pokePics[pokemonIndex] }
The code takes in the index (number in an array) of a Pokémon which it looks up and stores in the
info
variable. Thethis
keyword is used to refer to variables attached to the specific Pokémon object you're creating. Every Pokémon will have anid
,name
, andimage
, so you need to refer to the specific ones attached to this Pokémon. What the code does here is take thename
andid
from the JSON about the Pokémon and theimage
from the array (PokePics
) of images.The next part is a bit trickier: A Pokémon can have more than one type, so you need to create a
types
array to store them, and then add them using afor
loop that looks through the types ininfo.types
and adds their names intothis.types
. You need to update thefunction
you just wrote to add the code for types, like this:function Pokemon(pokemonIndex) { var info = pokemonInfo[pokemonIndex] this.id = info.id this.name = info.name this.image = pokePics[pokemonIndex] this.types = [] for(var i = 0; i < info.types.length; i++){ var type = info.types[i].type.name this.types.push(type) } }
Now that you've got a
function
to make a Pokémon, you need another one that will make all the Pokémon, by calling thisfunction
as many times as you have Pokémon. As you can probably guess, that's anotherfor
loop! Aren'tfor
loops great?function makePokemonList(pokemonCount) { for(var i = 0; i < pokemonCount; i++){ pokemon.push(new Pokemon(i)) } }
Notice how the
new
keyword is used to create aPokemon
object, using yourPokemon
function
. Thatnew
is telling JavaScript that thePokemon
function is making an object, rather than just doing series of instructions, so it will treat it a little differently. This is why thePokemon
object gets stored in thepokemon
array, rather than a reference to thePokemon
function
.Add a call to
makePokemonList
togetPokemon
, passing the number of Pokémon you've fetched as the value ofpokemonCount
, like this:async function getPokemon(pokemonCount){ pokemon = [] await fetchManyPokemon(pokemonCount) await fetchPokemonImages() await makePokemonList(pokemonCount) }