Angular combine data from multiple http requests

Question

I want to to get data for several different ProductIds from an remote source using httpClient within an angular service. I want to combine the data within the service and then return it.

Using just one productId, this works just fine:

getData(productId: string): Observable<any> {
  const path = this.serverUrl + '?' + 'productId=' + productId;
  return this.httpClient.get(path);
}

But how can I iterate over an array of product Ids and then return the combined result?

getData(productIds: Array<string>): Observable<any> {
  let data: Array<string>;

  productIds.forEach(element => {
     const path = this.serverUrl + '?' + 'productid=' + element;
     data.push(this.httpClient.get(path));
  });

  return data;

}

Thanks for your help!

Me personally I'd create a REST endpoint on the server to which you can post the array of IDs so a single HTTP call (and probably a single database query) can return all the products necessary... Like this it is very performance intensive. — Gimby
– Gimby, Commented Mar 8, 2019 at 10:59

Dariusz Ostolski · Accepted Answer · 2019-03-08 10:36:09Z

2

If you want to ask for different products in parallel you can use forkJoin operator:

getData(productIds: Array<string>): Observable<any> {  
  const data = productIds.map(element => {
     const path = this.serverUrl + '?' + 'productid=' + element;
     return this.httpClient.get(path);
  };
  return forkJoin(...data);
}

answered Mar 8, 2019 at 10:36

Dariusz Ostolski

4723 silver badges10 bronze badges

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

Comments

manish · Accepted Answer · 2019-03-08 10:58:39Z

1

you can try using forkJoin

[P.S.] the code below is not tested

 let productAPIs = [1,2,3,4];

 productIds.forEach(element => {
    const path = this.serverUrl + '?' + 'productid=' + element;
    productAPIs.push(this.http.get(path);
 });


 forkJoin(productAPIs).subscribe(results => {
    // results[0] is your productId[0]
    // results[1] is your productId[1]
 });

answered Mar 8, 2019 at 10:58

manish

1,4588 silver badges13 bronze badges

Comments

Korfoo · Accepted Answer · 2019-03-08 10:32:31Z

0

You should take a look at the zip function from RXJS. It combines all the results from different observables into an array.

getData(productIds: Array<string>): Observable<any> {
  let data: Array<Observable<any>>;

  productIds.forEach(element => {
     const path = this.serverUrl + '?' + 'productid=' + element;
     data.push(this.httpClient.get(path));
  });

  return zip(data);
}

answered Mar 8, 2019 at 10:32

Korfoo

6094 silver badges12 bronze badges

Collectives™ on Stack Overflow

Angular combine data from multiple http requests

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related