Parallel http requests via forkJoin and response identification

Question

I would like to make parallel independent calls to an endpoint.

First I construct my calls then I call forkJoin .

getAllDirections(data: Object, date: string) {
  let urls = [];
  for (let elm in data) {
    let url = `http:XXXXX?date=${date}&directions=${data[elm].All.join()}`;
    urls.push(this.http.get<ISchedules>(url));
  }
  return forkJoin(urls).pipe(
    map(dirData => {
      let dataSorted = dirData.map(elm => _.groupBy(elm.data, 'direction'));
      return dataSorted;
    })
  );
}

the data params is an objects of params that I pass to the URl

data = {
    b1: [params1],
    b2: [params2],
    b3: [params3]
}

What I would as result be able to construct this object

dataRes = {
    b1: [resDataofParams1],
    b2: [resDataofParams2],
    b3: [resDataofParams3]
}

When I get the array response I should affect every array item to it's corresponding b{n} , How can I get the responses in the same order that I passed in forkJoin ? Or it there a way to pass a parameter in this.http.get<ISchedules>(url) and get it when I get data response ?

Answer 1

In my view, it is better to use already created method forkJoin() from library RXJS . In RXJS 6.5 you need to pass an array of observables :

const combined = Observable.forkJoin(
  [(this.http.get('https://foourl1').map((res: Response) => res.json()),
  of(this.http.get('https://foourl1').map((res: Response) => res.json())]
)

combined.subscribe(latestValues => {
    const [ data_changes , data_all ] = latestValues;
    console.log( "data_changes" , data_changes);
    console.log( "data_all" , data_all);
});

forkJoin will return data when all calls are finished and return result.

Another example:

const request1 = this.http.get('https://restcountries.eu/rest/v1/name/india');
const request2 = this.http.get('https://restcountries.eu/rest/v1/name/us');
const request3 = this.http.get('https://restcountries.eu/rest/v1/name/ame');
const request4 = this.http.get('https://restcountries.eu/rest/v1/name/ja');

const requestArray = [];
requestArray.push(request1);
requestArray.push(request2);
requestArray.push(request3);
requestArray.push(request4);

forkJoin(requestArray).subscribe(results => {
  console.log(results);
  this.response = results;
});

All results are ordered accordingly pushed items into requestArray. It can be seen in a stackblitz example .

Answer 2

As of RxJS 6.5 you can pass a dictionary of Observables to forkJoin to get an Object with the last response from every Observable.

const http = (url: string) => of("response for " + url);
const data = {
  b1: ["b1-1", "b1-2"],
  b2: ["b2-1", "b2-2"],
  b3: ["b3-1", "b3-2"]
};
const date = '15.01.2020';

// map data to dictionary of http requests
const httpRequests = Object.keys(data).reduce((p, c) => {
  const url = `http:XXXXX?date=${date}&directions=${data[c].join(',')}`;
  return { ...p, [c]: http(url) };
}, {});

forkJoin(httpRequests).subscribe(console.log);

// output
{ 
  b1: "response for http:XXXXX?date=15.01.2020&directions=b1-1,b1-2", 
  b2: "response for http:XXXXX?date=15.01.2020&directions=b2-1,b2-2", 
  b3: "response for http:XXXXX?date=15.01.2020&directions=b3-1,b3-2"
}

https://stackblitz.com/edit/rxjs-qecpud