angular - Get rid of subscriptions in subscriptions

Question

I try to understand what RxJS flatMap does to get rid of a subscription in another subsription:

this.http.get<IFilm>(`https://swapi.dev/api/films/${id}/`).subscribe(res => {
  this.film = res;
  this.film.characters.map((url: string) => {
    this.http.get<IActor>(url).subscribe(res => {
      this.name = res;
      this.NameList.push(this.name)
    })
  })

});

What would be a good way to resolve this? Is it possible to do this in a method or should I use 2 for example or pipes like here:

https://stackblitz.com/edit/angular-dlony2?file=src%2Fapp%2Fstar-wars.service.ts

Answer 1

Here I've done the RxJS thing of not putting any side effects into your transformations/data pipeline and saving them all for the end consumer (subscribe).

This should make it much easier to test, extend, and maintain your code.

Typically your end consumer should be the UI or a database of some sort. There's rarely a reason to have your end consumer just set a global variable, but that's where I left it for now.

this.http.get<IFilm>(`https://swapi.dev/api/films/${id}/`).pipe(  
  map(film => ({
    film,
    nameCalls: film.characters.map(
      url => this.http.get<IActor>(url)
    )
  })),
  mergeMap(({film, nameCalls}) => forkJoin(nameCalls).pipe(
    map(names => ({film, names}))
  ))
).subscribe(({film, names}) => {
  this.film = film;
  this.nameList = names;
});