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
functionto create andreturnan 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
infovariable. Thethiskeyword 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 thenameandidfrom the JSON about the Pokémon and theimagefrom 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
typesarray to store them, and then add them using aforloop that looks through the types ininfo.typesand adds their names intothis.types. You need to update thefunctionyou 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
functionto make a Pokémon, you need another one that will make all the Pokémon, by calling thisfunctionas many times as you have Pokémon. As you can probably guess, that's anotherforloop! Aren'tforloops great?function makePokemonList(pokemonCount) { for(var i = 0; i < pokemonCount; i++){ pokemon.push(new Pokemon(i)) } }Notice how the
newkeyword is used to create aPokemonobject, using yourPokemonfunction. Thatnewis telling JavaScript that thePokemonfunction is making an object, rather than just doing series of instructions, so it will treat it a little differently. This is why thePokemonobject gets stored in thepokemonarray, rather than a reference to thePokemonfunction.Add a call to
makePokemonListtogetPokemon, 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) }