CODEWITHSUNDEEP
javascriptreactjsarraysfetch-api
cosmic
cosmic

Reputation: 73

How to fetch data from multiple url and store it in single array in javascript?

I have an array of Objects `filteredG`, Every single object contains some Json data about route. Objects inside filteredG can change frequently. The url I want to fetch from is changing based on route.id. If I try to map this data it isn't getting mapped inside a single array, since I try to fetch data from multiple link. Note that, there is many to many relations between routes and stoppages.

My code example:

filteredG = [{id: 1, attributes: {…}, calendarId: 0, name: 'Rupsha'}, {id: 2, attributes: {…}, calendarId: 0, name: 'Boyra'}] this array has variable length.

filteredG.forEach((route) => fetch(`/api/stoppages?routeId=${route.id}`)
  .then((response) => response.json())
  .then((data) => {
    data.map((stoppage) => console.log(stoppage));
  }));

Result:

this snippet is printing bunch of stoppages objects in the console.

What I want is to store these objects which is currently get printed in a single array. How can I make that happen?

Please help.

Upvotes: 0

Views: 558

Answers (2)

Gia Huy Nguyễn
Gia Huy Nguyễn

Reputation: 137

I hope I understand what you mean

const allData = filteredG.map((route) => fetch(`/api/stoppages?routeId=${route.id}`)
  .then((response) => response.json()));
const aData = Promise.all(allData).then((arrayData) =>
 arrayData.reduce((data, item) => ([...data, ...item]), []));

//result
aData.then(data => console.log(data));

Upvotes: 1

Dmytro Kudryk
Dmytro Kudryk

Reputation: 1

if you don't care about the order in which the results get into the array, you can use this option:

Promise.all(filteredG.map(route =>
  fetch(`/api/stoppages?routeId=${route.id}`)
    .then(response => response.json())
)).then(results => {
   ...here you map the result to an array
})

Upvotes: 0

Related Questions