using multiple api calls, after first api others return undefined

user_11263582 0
Viewed 295

Everyone does a weather app for api practice so I decided to do something different I'm using Pokeapi to make a small app. I have to call a few different apis to make it work how I want which is being done like this

const api = "https://pokeapi.co/api/v2/pokemon";
const apiMoves = "https://pokeapi.co/api/v2/move";
const apiSpecies = "https://pokeapi.co/api/v2/pokemon-species"

const searchBox = document.querySelector(".search-box");
searchBox.addEventListener("keypress", setQuery);

function setQuery(e) {
  if (e.keyCode == 13) {
    getResults(searchBox.value);
    searchBox.value = "";
  }
}
function getResults(query) {
  const pokemonData = fetch(`${api}/${query}`)
  .then((data) => {
     return data.json();
  });
  pokemonData.then(displayResults)

  pokemonData.then(data => {
      return fetch(`${apiMoves}/${data.moves[0].move.name}`)
      .then(data => data.json())
      .then(move => {
          console.log(move)
      })
  })
  pokemonData.then(data => {
      return fetch(`${apiSpecies}/${query}`)
      .then(data => data.json())
      .then(species => {
          console.log(species)
      })
  })
}

all 3 of the end points are being logged in the console so I can see them. However looking at api call 2 I'm passing info from the first api call to get more info and that logs fine. When I'm trying to display the info from that 2nd api call it just returns undefined but in the console I can see all the endpoints.

the display results looks something like this.

function displayResults(pokemon) {
  let name = document.querySelector('h2')
name.innerText = pokemon.name <-- this works.
  let dmg1 = document.querySelector('.dmg1')
dmg1.innerText = pokemon.power <-- this is returning undefined but in the console "power" shows a number.
}

I've tried to replace the pokemon.power with move.power but that gives an error saying "move" is not defined.

I'm thinking that I'm simply calling the 2nd and 3rd api wrong? I'm not sure and trying to search for this issue is a bit rough.

any help is appreciated!

javascript
2 Answers

Here this line is not working because you are trying to access the attribute which does not exist in the object.

let dmg1 = document.querySelector('.dmg1')
dmg1.innerText = pokemon.power <-- this is returning undefined but in the console "power" shows a number.

What might work for you is:

dmg1.innerText = pokemon.moves[0].move.name
user_84633860 

const pokeApiPrefix = 'https://pokeapi.co/api/v2/';
const apiPokemon = `${pokeApiPrefix}pokemon`;
const apiMoves = `${pokeApiPrefix}move`;
const apiSpecies = `${pokeApiPrefix}pokemon-species`;

const searchBox = document.querySelector('.search-box');
searchBox.addEventListener('keypress', setQuery);

function setQuery(e) {
  if (e.keyCode == 13) {
    getResults(searchBox.value.toLowerCase());
    searchBox.value = '';
  }
}
getResults('Dragonite'.toLowerCase());
function getResults(pokemon) {
   let dmg1 = document.querySelector('.dmg1');
  dmg1.innerText = `Getting results. Please wait...`;
  const pokemonData = fetch(`${apiPokemon}/${pokemon}`)
    .then((data) => data.json())
    .then((data) => {
      console.log(`pokemon data:`, data);
      displayPokemonName(data);
      const moveName = data.moves[0].move.name;
      return fetch(`${apiMoves}/${moveName}`);
    })
    .then((data) => {
      return data.json();
    })
    .then((data) => {
      displayMovePower(data);
      console.log(`move data:`, data);
      return fetch(`${apiSpecies}/${pokemon}`);
    })
    .then((data) => data.json())
    .then((data) => {
      console.log(`species data:`, data);
    });
}

// function displayResults(pokemon) {
//   let name = document.querySelector('h2');
//   name.innerText = pokemon.name;
//   let dmg1 = document.querySelector('.dmg1');
//   // I couldn't find 'power' attribute on api results, used id instead
//   // https://pokeapi.co/docs/v2#pokemon
//   dmg1.innerText = `#${pokemon.id}`;
// }

function displayPokemonName(pokemon) {
  let name = document.querySelector('h2');
  name.innerText = `Pokemon name: ${pokemon.name}`;
}

function displayMovePower(move) {
  let dmg1 = document.querySelector('.dmg1');
  dmg1.innerText = `Move power: ${move.id}`;
}
<input type="text" class="search-box" />

<h2></h2>
<div class="dmg1"></div>

I've created a snippet, chaining multiple promises and logging every result on the console. As stated, it seems you are trying to use an attribute 'power', which is not present in the first pokemon api call

user_106284080
Related