I have an array of data and need to fetch data for each item and combine them.

// This is inside a Nextjs async API route

const data = ['item1','item2','item3']

let result = []

data.forEach(async (item)=>{
const res = await fetch(`https://websitename.com/${item}`)
result = [...result,...res]
}

console.log(result)  //gives an empty array

Here, it returns an empty array even though for each item data is being fetched. How to make such requests?

}

CodePudding user response：

Your code should be throwing errors I think? You're trying to declare result twice, but as the second time is within the forEach loop, it's actually a different variable, and is created and destroyed for each loop.

Assuming your fetch works, this should work:

const data = ['item1','item2','item3']

let result = []

data.forEach(async (item)=>{
const res = await fetch(`https://websitename.com/${item}`)
result = [...result,...res]
}

console.log(result)

CodePudding user response：

May this could help you :)

async function doRequest(data) {
   // process here
}

const requests = ['item1', 'item2', 'item3'];
const results = requests.map(async (val) => {
    const response = await doRequest();
    return response;
});

await Promise.all(requests);

CodePudding user response：

Change:

const res = await fetch(`https://websitename.com/${item}`)
const result = [...result,...res]

To:

const response = await fetch(`https://websitename.com/${item}`);
const data = response.json(); // if your response is Json
result.push(data);

• result should be const instead of let