Angular RXJS multiple HTTP nested requests

Question

I can succesully make multiple parallel http calls using the forkjoin operator (example call all sales data) however I need to concatenate further http calls based on the results of each of the first (sales ) http calls. I'm not sure if the mergeMap or concat operators are best and how they fit in here

example data is sales

{saleId:100, name:'bob, uri:'http://testserver/sales/100'}
{saleId:101, name:'fred, uri:'http://testserver/sales/101'}
{saleId:102, name:'billy, uri:'http://testserver/sales/102'}


products
{id:1,saleId:101, detail:'test1', product:{id:200, uri:'http://testserver/product/200'} }
{id:1,saleId:101, detail:'test1', product:{id:201, uri:'http://testserver/product/201'} }
{id:1,saleId:101, detail:'test1', product:{id:202, uri:'http://testserver/product/202'} }

getServerChildNodes(childNodeObj: any[]): Observable<any> {
    //observablesListArray contains http sales uri
    return forkJoin(observablesListArray)
        .map((data: any[]) => {
            for (let i = 0; i < data.length; i++) {
               outputData.push(data[i].json());
            }
            return outputData;
        });
}

Picci Picci · Accepted Answer · 2018-07-14T07:29:12

I am not sure I understand your question right, but it seems that you are looking for a way to concatenate 2 subsequent http calls, with the second requiring some data returned by the first. Plus, you want to run many of such chained calls in parallel.

If this is the case, this could be a way to approach it.

getSaleIds(): Observable<string[]>;

getSale(id: string): Observable<Sale> {
  // calls and http service and returns a Sale for a certain id
  // each Sale contains a productId to be used in the subsequent call
}

getProduct(productId: string): Observable<Product> {
  ...
}

getSaleAndThenProduct(saleId: string) {
  return getSale(saleId).pipe(
    switchMap(sale => getProduct(sale.productId),
    map(product => ({sale, product}))
  );
}

getSaleIds()
.pipe(
  map(saleIds => saleIds.map(id => getSaleAndThenProduct(id)),
  switchMap(functions => forkJoin(functions))
)
.subscribe(salesAndProducts => // do something)

salesAndProducts is an Array of objects of type {sale: Sale, product: Product}

Angular RXJS multiple HTTP nested requests

1 Answers