using multiple api calls, after first api others return undefined

Question

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!

Answer 1

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