CODEWITHSUNDEEP
javascriptangularrxjsfrontend
BonFrero
BonFrero

Reputation: 25

Nested http request in RxJS

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)) //?
        }) 
    ),
)

Upvotes: 0

Views: 575

Answers (1)

Barremian
Barremian

Reputation: 31105

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(...)

Upvotes: 1

Related Questions