Add data to http response using rxjs

Question

I have a trip entity which contains driver id. I can get fetch trip using RESTFull endpoint, e.g. /trips/2/.

//example response
{
  id: "2",
  driver_id: "123"
}

I can fetch driver details using the endpoint. e.g. /drivers/123/, My final respected response is

//expected response from observable
{
  id: "2",
  driver_id: "123",
  detailed_driver: {
    name: "abc",
    id: "123"
  }
}

Currently I do it as follows

this.http("/trips/2/").map(data => data.json()).subscribe(trip => {
   this.http("/drivers/" + trip.driver_id + "/").map(data => data.json()).subscribe(driver => {
      trip.detailed_driver = driver;
      this.trip = trip 
   }
}

How can I use Rxjs to use these two endpoints to get final expected response from a single observable?

Answer 1

You could use the flatMap operator and Observable.forkJoin as described below:

this.http.get('/trips/someid')
   .map(res => res.json())
   .flatMap(res => {
     return Observable.forkJoin([
       Observable.of(res),
       this.http.get('/drivers/'+res['driver_id']).map(res => res.json())
     ]);
   })
   .map(res => {
     res[0]['detailed_driver'] = res[1];
     return res[0]
   })
 .subscribe(
   (data) => {
   }
 );

The flatMap allows to execute another request when the first one is received. Observable.forkJoin allows to receive both the response of the first response and the result of the second one at the end.

This way you will be able to update the first result with the second one...