Nested http request in RxJS

Question

I'm beginner in Angular so I faced a challenge. How to interact with nested http request in Angular using RxJS ?

.pipe(
    map((res): Collection => ({
            id: res.id,
            name: res.name,
            description: res.description,
            tracks: res.tracks.items.map(track => this.trackService.fetchTrack(track.id)) //?
        }) 
    ),
)

You may find inspiration here

Picci
– Picci

2020-11-13 12:00:21 +00:00
Commented Nov 13, 2020 at 12:00 — Picci
– Picci, Commented Nov 13, 2020 at 12:00

Barremian · Accepted Answer · 2020-11-13 12:25:15Z

1

You need to use switchMap to map from outer observable to inner. And seeing that you have multiple HTTP calls from an array, you could use forkJoin to trigger them in parallel.

Try the following

outerObservable().pipe(
  switchMap((res): Collection => {
    forkJoin(res.tracks.items.map(track => this.trackService.fetchTrack(track.id))).pipe(
      map(tracks => ({
        id: res.id,
        name: res.name,
        description: res.description,
        tracks: tracks
      }))
    )
  })
).subscribe(...)

edited Nov 13, 2020 at 12:25

answered Nov 13, 2020 at 11:50

Barremian

31.2k4 gold badges37 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

BonFrero Over a year ago

Thank you so much it worked for me, but the one thing I had to do is to replace (res: Collection) by (res): Collection

Barremian Over a year ago

Not sure why (res: Collection) wouldn't work but nevertheless I've updated the answer to reflect your change.

Collectives™ on Stack Overflow

Nested http request in RxJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related