let object = [{ id: `01`, name: `fish`, type: `marine`, }, { id: `02`, name: `fish`, type: `fresh`, }, { id: `03`, name: `fish`, type: `tank`, }, { id: `04`, name: `animal`, type: `pet`, }, { id: `05`, name: `animal`, type: `wild`, }, { id: `06`, name: `animal`, type: `zoo`, }, { id: `07`, name: `food`, type: `veg`, }, { id: `08`, name: `food`, type: `non-veg`, }] let data = [] object.map((value) => { data.push([value.name, value.type]) }) console.log(data)
Puedo obtener datos fuera de la función de mapa en el primer ejemplo, pero en el segundo segundo ejemplo no puedo obtener datos
let object = [{ id: `01`, name: `fish`, type: `marine`, }, { id: `02`, name: `fish`, type: `fresh`, }, { id: `03`, name: `fish`, type: `tank`, }, { id: `04`, name: `animal`, type: `pet`, }, { id: `05`, name: `animal`, type: `wild`, }, { id: `06`, name: `animal`, type: `zoo`, }, { id: `07`, name: `food`, type: `veg`, }, { id: `08`, name: `food`, type: `non-veg`, }] let data=[]; let test; object.map(async (value) => { test = await getValue(value.name); data.push([value.name,value.type,test]); }) console.log(data);
Como en el primer ejemplo, puedo obtener fácilmente datos fuera de la función de mapa, pero en la segunda función obtengo una matriz en blanco. ¿Cómo puedo obtener datos asíncronos en espera fuera de la función de mapa?
Prueba esto y obtendrás tu respuesta viva for loop fácilmente. La función de mapa utiliza una función de devolución de llamada que se atravesará en cada elemento para una matriz dada. Para obtener más detalles, simplemente revise esta función async/ await para Array.map, también puede usar la promesa. todo para lo mismo que se menciona en la publicación en el enlace dado.
let object= [ { id:`01`, name:`fish`, type:`marine`, }, { id:`02`, name:`fish`, type:`fresh`, }, { id:`03`, name:`fish`, type:`tank`, }, { id:`04`, name:`animal`, type:`pet`, }, { id:`05`, name:`animal`, type:`wild`, }, { id:`06`, name:`animal`, type:`zoo`, }, { id:`07`, name:`food`, type:`veg`, }, { id:`08`, name:`food`, type:`non-veg`, } ] const getData = async function(){ let data=[]; for (var i=0; i<object.length; i++){ let value = object[i]; let test= await getValue(value.name); data.push([value.name,value.type,test]); } return data; } console.log(await getData());
Utilice Promise.all
:
const data = await Promise.all(object.map(async (value) => { const test = await getValue(value.name); return [value.name,value.type,test] })) console.log(data)
Tenga en cuenta que la función map genera un objeto Promise como valor de retorno para cada elemento.
Y el momento en que data
terminen de recopilar todos los datos debería llegar después de que finalicen todas las Promesas.
Entonces, para asegurarse de que finalice el procedimiento, use await Promise.all()
antes de usar los data
.
let object = [{ id: `01`, name: `fish`, type: `marine`, }, { id: `02`, name: `fish`, type: `fresh`, }, { id: `03`, name: `fish`, type: `tank`, }, { id: `04`, name: `animal`, type: `pet`, }, { id: `05`, name: `animal`, type: `wild`, }, { id: `06`, name: `animal`, type: `zoo`, }, { id: `07`, name: `food`, type: `veg`, }, { id: `08`, name: `food`, type: `non-veg`, }] let data=[]; let test; let promises = object.map(async (value) => { test = await getValue(value.name); data.push([value.name,value.type,test]); }) // 1. This line matters await Promise.all(promises); console.log(data); // 2. Or if you cannot use await here Promise.all(promises).then(() => { console.log(data); });
Por cierto, debido a que la función getValue
es asíncrona, es posible que obtenga los datos en un orden completamente aleatorio, si le importa el orden, es posible que necesite otro enfoque.