How can I get values from two observables sequentially?

Question

I'm a newbie with RxJs.

My purpose is : (1) make a first call backend and get value, then (2) based on the returned value, make an other call backend and return both values as an array.

When I subscribe, I would like get both values : building and buildingUnit.

This is the way of I trying to achieve this purpose :

this._buildingsService.loadBuilding(1).pipe(
  mergeMap((b: Building) => {
    if (b) {
      return this._buildingUnitsService.loadBuildingUnit(b);
    }
  })
).subscribe((bu: BuildingUnit) => {

});

The kind of result that I would like to get back :

this._buildingsService.loadBuilding(1).pipe(
  mergeMap((b: Building) => {
    if (b) {
      return this._buildingUnitsService.loadBuildingUnit(b);
    }
  })
).subscribe((b: Building, bu: BuildingUnit) => {

});

Thank you

Answer 1

You could use forkJoin to pass both values back:

this._buildingsService.loadBuilding(1).pipe(
  mergeMap((b: Building) => forkJoin({
    b: of(b),
    bu: b ? this._buildingUnitsService.loadBuildingUnit(b) : of(null)
  }))
).subscribe((result: { b: Building, bu: BuildingUnit  }) => {

});

DEMO: https://stackblitz.com/edit/angular-p5vtej

Answer 2

You can just map the second value into an array.

this._buildingsService.loadBuilding(1).pipe(
  mergeMap((b: Building) => {
    if (b) {
      return this._buildingUnitsService.loadBuildingUnit(b).pipe(
        map(c => [b, c]),
      );
    }
    return of([b]); // or `[b, undefined]` to be more obvious
  })
  .subscribe(([b, c]) => {
    // ...
  })