Todo el mundo hace una aplicación meteorológica para la práctica de api, así que decidí hacer algo diferente. Estoy usando Pokeapi para hacer una pequeña aplicación. Tengo que llamar a algunas API diferentes para que funcione como quiero, lo cual se está haciendo así.
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) }) }) }los 3 puntos finales se registran en la consola para que pueda verlos. Sin embargo, mirando la llamada api 2, estoy pasando información de la primera llamada api para obtener más información y eso se registra bien. Cuando trato de mostrar la información de esa segunda llamada API, simplemente devuelve indefinido, pero en la consola puedo ver todos los puntos finales.
los resultados de la pantalla se parecen a esto.
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. }Intenté reemplazar pokemon.power con move.power pero da un error que dice que "mover" no está definido.
¿Estoy pensando que simplemente estoy llamando incorrectamente a la segunda y tercera API? No estoy seguro y tratar de buscar este problema es un poco difícil.
cualquier ayuda es apreciada!
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>He creado un fragmento, encadenando varias promesas y registrando cada resultado en la consola. Como se indicó, parece que está tratando de usar un atributo 'poder', que no está presente en la primera llamada api de pokemon
Aquí esta línea no funciona porque está intentando acceder al atributo que no existe en el objeto.
let dmg1 = document.querySelector('.dmg1') dmg1.innerText = pokemon.power <-- this is returning undefined but in the console "power" shows a number.Lo que podría funcionar para usted es:
dmg1.innerText = pokemon.moves[0].move.name