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

Question

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.

Can you add more informations about what is stoppage ?

rdamev
– rdamev

2022-11-24 05:45:15 +00:00
Commented Nov 24, 2022 at 5:45 — rdamev
– rdamev, Commented Nov 24, 2022 at 5:45
@superdunck Stoppage are array of objects like routes.

cosmic
– cosmic

2022-11-24 09:23:29 +00:00
Commented Nov 24, 2022 at 9:23 — cosmic
– cosmic, Commented Nov 24, 2022 at 9:23

Gia Huy Nguyễn · Accepted Answer · 2022-11-24 05:55:50Z

1

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));

answered Nov 24, 2022 at 5:55

Gia Huy Nguyễn

1377 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

cosmic Over a year ago

Objects are getting repeated inside the array. Not showing the correct result. Even if route.id get changed, it's showing all objects inside the array

Dmytro Kudryk · Accepted Answer · 2022-11-24 05:51:58Z

0

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
})

answered Nov 24, 2022 at 5:51

Dmytro Kudryk

12 bronze badges

1 Comment

cosmic Over a year ago

It is storing data in a single array. But the result doesn't change when route.id get changes. result expected to be shown only for the selected route.

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related