angular rxjs: handle multiple http requests

Question

I have following pseudocode

objects = [obj1, obj2, obj3]    
for obj in objects {
user: http.get(obj1.user_id)
product: http.get(obj1.product_id)
}.subscribe(results => {

do something with results

})

What I want here is that, I loop through an array of objects and for each object get related user and product and then subscribe to do something with the user and product. How can I do that?

you can try to check this info about with observables: https://stackoverflow.com/questions/35268482/chaining-rxjs-observables-from-http-data-in-angular2-with-typescript or you can check this info about promises: https://javascript.info/promise-chaining — crizcl, Feb 24 '21 at 13:11

ruth · Accepted Answer · 2021-02-24T13:24:58.120

You could use RxJS forkJoin along with Array#map to trigger multiple observables in parallel.

const objects = [obj1, obj2, obj3];

forkJoin(
  objects.map(obj =>           // <-- `Array#map` function
    forkJoin({
      user: http.get(obj.user_id)
      product: http.get(obj.product_id)
    })
  )
).subscribe({
  next: (res) => {
    console.log(res);
    // use `res`
  },
  error: (err) => {}
});


/*
output in subscription: 
[
  { 
    user: result from `http.get(obj1.user_id)`,
    product: result from `http.get(obj1.product_id)`,
  },
  { 
    user: result from `http.get(obj2.user_id)`,
    product: result from `http.get(obj2.product_id)`,
  },
  { 
    user: result from `http.get(obj3.user_id)`,
    product: result from `http.get(obj3.product_id)`,
  }
]
*/

How to console.log the results inside subscribe? – StaticName Feb 24 '21 at 13:24 — StaticName, Feb 24 '21 at 13:24

score 1 · Answer 2 · answered Feb 24 '21 at 13:15

You could use the zip() operator to combine your requests and execute some code once every request has finished:

const sourceOne = http.get(obj1.product_id);
const sourceTwo = http.get(obj2.product_id);

zip(sourceOne, sourceTwo).subscribe(val => {
    // do something
});

angular rxjs: handle multiple http requests

2 Answers2

Linked