Estoy usando poke api https://pokeapi.co/ para aprender Svelte. Uso fetch para obtener la lista de pokemons y una llamada de búsqueda anidada para obtener la URL de la imagen de cada pokemon buscado. Mientras console.logging el resultado, la matriz de pokemons se ve bien, con imgUrl adjunto.
JavaScript (esbelto):
async function fetchGroup() { const response = await fetch('https://pokeapi.co/api/v2/type/11').then(result => result.json()); response.pokemon.forEach(async (elem, index) => { const imgUrl = await fetch(elem.pokemon.url).then(result => result.json().then(result => result.sprites.front_default)) elem.pokemon = { ... response.pokemon[index].pokemon, ... { imgUrl : imgUrl }} }) console.log(response.pokemon); // this log returns the correct obejct with imgUrl appended return response.pokemon; }Sin embargo, ese valor agregado parece no estar definido dentro del bloque {#await}
{#await pokemonsList} waiting... {:then response} {#each response as responseItem} {responseItem.pokemon.name} this is alright! {responseItem.pokemon.imgUrl} this is undefined {/each} {:catch error} {error.message} {/await}¿Qué pasa aquí?
Como se menciona en los comentarios, debe await lo que está haciendo en forEach . Para hacerlo, deberá transformar response.pokemon.forEach( para await Promise.all(response.pokemon.map( :
async function fetchGroup() { const response = await fetch('https://pokeapi.co/api/v2/type/11').then(result => result.json()); await Promise.all(response.pokemon.map(async (elem, index) => { const imgUrl = await fetch(elem.pokemon.url) .then(result => result.json() .then(result => result.sprites.front_default)) elem.pokemon = { ... response.pokemon[index].pokemon, ... { imgUrl : imgUrl }} })) return response.pokemon; }Aquí hay un REPL que funciona.