I have two APIs to call sequentially, with data returned from the first one used in the second one.

I've tried using concatMap inside the first call, and then to use the values returned in the second call, but when I subscribe to the observable, I get only the second call's data.

How can I get the data from both calls in a single observable?

this.dataService.getPlayerData("heunetik").pipe(
    concatMap(data => this.dataService.getLifetimeStats(data.payload.guid))
).subscribe(finalData => {
    console.log(finalData);
});

Reading up on the documentation, this is what seemed to make the most sense, but the examples are pretty confusing... :/

I have two APIs to call sequentially, with data returned from the first one used in the second one.

I've tried using concatMap inside the first call, and then to use the values returned in the second call, but when I subscribe to the observable, I get only the second call's data.

How can I get the data from both calls in a single observable?

this.dataService.getPlayerData("heunetik").pipe(
    concatMap(data => this.dataService.getLifetimeStats(data.payload.guid))
).subscribe(finalData => {
    console.log(finalData);
});

Reading up on the documentation, this is what seemed to make the most sense, but the examples are pretty confusing... :/

• javascript
• angular
• rxjs
• observable

• I have mentioned a better and clean solution, have a look. – Zain Ahmad Khan Commented Apr 16, 2019 at 15:36

2 Answers 2

you want to do some kind of inner map to bine the data:

this.dataService.getPlayerData("heunetik").pipe(
    switchMap(data => this.dataService.getLifetimeStats(data.payload.guid)
                          .pipe(map(innerData => [data, innerData])))
).subscribe(finalData => {
    console.log(finalData);
});

This would return the data in an array, first data set at 0 and second at 1.

switchMap is just my preference, doesn't really matter here between switch/concat/merge... They all have slightly different uses that matter with multiple emissions, but they'll all function identically here since these are all single emission observables. I prefer switch because I think it's semantically more clear that I'm expecting single emissions, but opinions may differ on that point.

The high order maps used to provide a second argument that allowed for this bination but they removed it with rxjs 5 or 6 or so in favor of the inner map pattern to save on import size (which IMO was a bad decision... map arguments were useful more often than not and the inner map looks cluttered).

we use the mergeMap also known as flatMap to map/iterate over the Observable values.

this.dataService.getPlayerData("heunetik").pipe(
    mergeMap(data => this.dataService.getLifetimeStats(data.payload.guid))
    .pipe(map(data2=>([data,data2])
).subscribe(finalData => {
    console.log(finalData);
});