Estoy usando pokeapi y estoy creando un objeto dentro de una promesa para cada pokemon, pero tengo que obtener la información que está en .species y está en otra URL, así que estoy llamando a otra búsqueda pero no me da los datos.
const fetchPokemon = () => { const promises = []; for (let index = 1; index <= 150; index++) { const url = `https://pokeapi.co/api/v2/pokemon/${index}`; promises.push(fetch(url).then((res) => res.json())); } Promise.all(promises).then((results) => { const pokemon = results.map((data) => ({ name: data.name, egg_groups: getEgg(data) }));Y el método que estoy llamando en egg_groups es así:
return fetch(data.species.url).then((response) => response.json()).then( (res)=> res.egg_groups.map((egg_group) => egg_group.name).join(" and "));¿Cómo puedo obtener el "monstruo y la planta" en lugar de la promesa completa?
Puede llamar a la función getEgg para cada resultado en la matriz de results y luego encadenarlo con .then y resolver la matriz resultante usando Promise.all .
const fetchPokemons = () => { const promises = []; for (let index = 1; index <= 2; index++) { const url = `https://pokeapi.co/api/v2/pokemon/${index}`; promises.push(fetch(url).then((res) => res.json())); } return Promise.all(promises).then((results) => Promise.all(results.map((data) => getEgg(data).then((egg) => ({ name: data.name, egg_groups: egg, })) )) ); }; function getEgg(data) { return fetch(data.species.url) .then((response) => response.json()) .then((res) => res.egg_groups.map((egg_group) => egg_group.name).join(" and ") ); } fetchPokemons().then((pokemons) => pokemons.map(poke => { document.body.innerHTML += `<p>${poke.name} - ${poke.egg_groups}</p>` })); También puedes generar los datos para cada pokemon dentro de la función getEgg ( renombrada como getData ), como se muestra a continuación:
const fetchPokemons = () => { const promises = []; for (let index = 1; index <= 2; index++) { const url = `https://pokeapi.co/api/v2/pokemon/${index}`; promises.push(fetch(url).then((res) => res.json())); } return Promise.all(promises).then((results) => Promise.all(results.map(getData)) ); }; function getData(data) { return fetch(data.species.url) .then((response) => response.json()) .then((res) => ({ name: data.name, egg_groups: res.egg_groups .map((egg_group) => egg_group.name) .join(" and "), })); } fetchPokemons().then((pokemons) => pokemons.map((poke) => { document.body.innerHTML += `<p>${poke.name} - ${poke.egg_groups}</p>`; }) );Sugeriría usar la sintaxis async y await , esto le permite estructurar el código asíncrono de una manera más legible.
Crearíamos una función getPokemon() que acepta un argumento de índice. Una vez que recuperamos el objeto pokemon usando fetch() , podemos obtener los eggs usando la misma función.
Luego podemos devolver un objeto que incluye el nombre del pokemon, los grupos de huevos, etc.
Luego, también podemos crear una función getPokemonArray() que buscará una matriz de pokemons, tomando un índice de inicio y final como argumentos:
async function getPokemon(index) { const url = `https://pokeapi.co/api/v2/pokemon/${index}`; const pokemon = await fetch(url).then((res) => res.json()); const eggs = await fetch(pokemon.species.url).then((response) => response.json()); const egg_groups = eggs.egg_groups.map((egg_group) => egg_group.name).join(" and "); return { index, name: pokemon.name, egg_groups }; } async function getPokemonArray(startIndex, endIndex) { let promises = []; for (let index = startIndex; index <= endIndex; index++) { promises.push(getPokemon(index)); } let pokemonArray = await Promise.all(promises); console.log('Pokemon array:', pokemonArray); return pokemonArray; } getPokemonArray(1,3); getPokemonArray(40,42); .as-console-wrapper { max-height: 100% !important; }Debe insertar la palabra clave asíncrona para que la función de mapa sea asíncrona para usar esperar allí. Dado que debe "esperar" a que se resuelva la promesa para obtener el resultado.
Promise.all(promises).then((results) => { const pokemon = results.map(async (data) => ({ name: data.name, egg_groups: await getEgg(data) })); return pokemon; });