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)I can fetch data outside the map function in first example but in second second example i can't fetch 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;
object.map(async (value) => {
test = await getValue(value.name);
data.push([value.name,value.type,test]);
})
console.log(data);As in first example i can easily fetch data outside the map function fut in second function I am getting blank array how can i fetch async await data outside map function
Try this you will get your response viva for loop easily. Map function uses a callback function which to be traversed on each element for given array. For more details just go throug this async/await for Array.map fuction, can also use the promise.all for the same as mentioned in post in the given link.
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());Use 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)
Note that the map function yields a Promise object as a return value for each item.
And the moment when data finishes collecting all the data should come after all the Promises finishes.
So to ensure the procedure finishes, use a await Promise.all() before you use the 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);
});By the way, because the getValue function is asyncronous, so you possibly will got the data in a completely random order, if you care about the order, you may need another approach.