I have a problem, I'm trying to use the Pokemon API, but when I try to access the attack, HP, and speed stats, it shows undefined
for all Pokemon! Can anyone tell me what's wrong with the API call?
const axios = require('axios'); const apiPokemon = async () => { try { const pokemons = await axios .get('https://pokeapi.co/api/v2/pokemon?limit=50') const secondUrlMap = await pokemons.data.results.map( pokemon => { return pokemon.url }) const pokemonArr = await Promise.all(secondUrlMap.map(async(url) => { const urlResponse = await axios(url) return{ id:urlResponse.data.id, name:urlResponse.data.name, height:urlResponse.data.height, weight:urlResponse.data.weight, hp:urlResponse.data.stats.find(stat => stat.name === 'hp')?.base_stat, attack:urlResponse.data.stats.find(stat => stat.name === 'attack')?.base_stat, speed:urlResponse.data.stats.find(stat => stat.name === 'speed')?.base_stat, types:urlResponse.data.types.map((type) => type.type.name), img:urlResponse.data.sprites.other['official-artwork'].front_default, } })) return pokemonArr } catch (error) { return ({error:error.message}) } } module.exports = { apiPokemon, }
I have an index.js file to test API reception and this is what it returns:
const { apiPokemon } = require('./apiPokemon') async function testApi() { const pokemons = await apiPokemon() console.log(pokemons) } testApi()
API structure:
P粉4035496162024-04-07 10:03:55
Your current code does not properly account for the JSON structure - it is looking for the name
property in the root of each object in the array. You need to use Destructuring to access the stat
properties directly in the condition:
hp: urlResponse.data.stats.find(({stat}) => stat.name === 'hp')?.base_stat attack: urlResponse.data.stats.find(({stat}) => stat.name === 'attack')?.base_stat // etc.
Or you can change stat.name
to stat.stat.name
.