Build a Pokémon Search App Project - Build a Pokémon Search App

JavaScript
1

Tell us what’s happening:

I’m trying to extract the Pokemon “type” from the https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/{name-or-id} endpoint.

I have already converted the url to json, and the data for Pokemon “type” is as follows (i.e. for Pikachu):

types: [ { slot: 1, type: [Object] } ]

I do not see any useful information in this data. How do I access the data that will actually say the Pokemon types?

Your code so far

Not necessary

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Challenge Information:

Build a Pokémon Search App Project - Build a Pokémon Search App

2

you could try to see what’s inside the type property

what’s your code for this project?

5 
//Declare Variables

const searchInput = document.getElementById('search-input');
const searchBtn = document.getElementById('search-button');
const pokemonName = document.getElementById('pokemon-name');
const pokemonId = document.getElementById('pokemon-id');
const weight = document.getElementById('weight');
const height = document.getElementById('height');
const sprite = document.getElementById('sprite-div');
const typesElement = document.getElementById('types');
const hp = document.getElementById('hp');
const attack = document.getElementById('attack');
const defense = document.getElementById('defense');
const spAttack = document.getElementById('special-attack');
const spDefense = document.getElementById('special-defense');
const speed = document.getElementById('speed');
const pokeApiProxy = "https://pokeapi-proxy.freecodecamp.rocks/api/pokemon";


//Search Function

const search = async (name, id) => {
    try {
      const res = await fetch(pokeApiProxy);
      const data = await res.json();
      const { results } = data;
      for (let i=0; i < results.length; i++) {
         
        if (data.results[i].name === searchInput.value.toLowerCase() || data.results[i].id == searchInput.value) {
          
        const resDetails = await fetch(`${pokeApiProxy}/${searchInput.value.toLowerCase()}`);
        const pokemonDetails = await resDetails.json();
        pokemonName.textContent = pokemonDetails.name.toUpperCase(); //
        pokemonId.textContent = `#${pokemonDetails.id}`;
        
        //Update Results Window
        
        weight.textContent = `Weight: ${pokemonDetails.weight}`
        height.textContent = `Height: ${pokemonDetails.height}`
        sprite.innerHTML = `<img id="sprite" src="${pokemonDetails.sprites.front_default}" alt="Pokémon Avatar" />`;
        typesElement.innerHTML = ''; // Clear previous content
        
        
        //Update Stats Table
        
        hp.textContent = pokemonDetails.stats[0].base_stat;
        attack.textContent = pokemonDetails.stats[1].base_stat;
        defense.textContent = pokemonDetails.stats[2].base_stat;
        spAttack.textContent = pokemonDetails.stats[3].base_stat;
        spDefense.textContent = pokemonDetails.stats[4].base_stat;
        speed.textContent = pokemonDetails.stats[5].base_stat;
        
      
        console.log(pokemonDetails);
        return;
      }
    }
  } catch (err) {
      console.log(err);
  }
}  


//Add Event Listener

searchBtn.addEventListener("click", search);
6

Looking at an example of that you should totally look inside that property

"types":[
    {"slot":1,"type":{"name":"grass","url":"https://pokeapi.co/api/v2/type/12/"}},
    {"slot":2,"type":{"name":"poison","url":"https://pokeapi.co/api/v2/type/4/"}}
]

(I looked at the value opening the API in the browser)

7

Oh! How do I “look inside”?

8

For me, this is all I see

types: [ { slot: 1, type: [Object] } ]
9

use console.log and the browser console to explore the data

10

I’m trying to use this code to access the types but the console says that pokemonTypes is undefined

let pokemonTypes = pokemonDetails.types.type;
console.log(pokemonTypes);
11

pokemonDetails.types is an array of objects, you are missing something to get inside this array

12

Ah, I got it! Thanks. I’m curious why the console displayed

type: [Object]

Instead of what the object actually is which is:

{ name: 'electric', url: 'https://pokeapi.co/api/v2/type/13/' }
13

the freeCodeCamp console it’s not a full fledged console, and it has limitations, use the browser console for all the features

14

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.