Is there a way to prevent nesting subscriptions in rxjs?

Question

Is there a way to prevent nesting subscriptions in rxjs?

Currently, I am working with a code that contains nested subscribes:

.subscribe((data) => {
  const { game, prizes } = data;
  this.ticketService.setListOfTickets(game.tickets);
  this.ticketService.getListOfTickets()
    .subscribe((data: any) => {
      this.listOfTickets = data;
    });
  this.game = game;
  this.type = game.type;
  this.combinations = prizes.map((el: Prize) => el.patterns).flat();
});

Is there a way to restructure this code in order to eliminate the need for nested subscriptions?

angular typescript rxjs

Answer 1

Answer №1

.pipe(
    switchMap(response => {
      this.ticketService.updateTicketsList(response.game.tickets);
      return this.ticketService.getAllTickets().pipe(
        map(updatedTickets => ({ ...response, updatedTickets }))
      );
    })
)
.subscribe(({ game, prizes, updatedTickets }) => {
    this.updatedTickets = updatedTickets;
    this.game = game;
    this.type = game.type;
    this.combinations = prizes.map((item: Prize) => item.patterns).flat();
});

In the code snippet above, switchMap function transforms the result of the initial request and switches to a new observable.

Answer 2

.pipe(
    switchMap(response => {
      this.ticketService.updateTicketsList(response.game.tickets);
      return this.ticketService.getAllTickets().pipe(
        map(updatedTickets => ({ ...response, updatedTickets }))
      );
    })
)
.subscribe(({ game, prizes, updatedTickets }) => {
    this.updatedTickets = updatedTickets;
    this.game = game;
    this.type = game.type;
    this.combinations = prizes.map((item: Prize) => item.patterns).flat();
});

In the code snippet above, switchMap function transforms the result of the initial request and switches to a new observable.

Answer 3

Answer №2

To consolidate multiple API calls into a single subscription, you can utilize forkJoin method. Without seeing the actual function name in your code, I'll refer to it as: gameService.getGames()

forkJoin([this.gameService.getGames(), this.ticketService.getListOfTickets()]).subscribe((data) => {
        const { game, prizes } = data[0];
        this.ticketService.setListOfTickets(game.tickets);
        this.listOfTickets = data[1];
        this.game = game;
        this.type = game.type;
        this.combinations = prizes.map((el: Prize) => el.patterns).flat();
      });

Answer 4

To consolidate multiple API calls into a single subscription, you can utilize forkJoin method. Without seeing the actual function name in your code, I'll refer to it as: gameService.getGames()

forkJoin([this.gameService.getGames(), this.ticketService.getListOfTickets()]).subscribe((data) => {
        const { game, prizes } = data[0];
        this.ticketService.setListOfTickets(game.tickets);
        this.listOfTickets = data[1];
        this.game = game;
        this.type = game.type;
        this.combinations = prizes.map((el: Prize) => el.patterns).flat();
      });

Is there a way to prevent nesting subscriptions in rxjs?

Answer №1

Answer №2

Similar questions

What is the best way to invoke a function in Typescript while retrieving data?

Setting dynamic values for SASS mixins in Angular 2 with Ionic 2

Utilizing the ternary operator in Angular HTML templates

When using Google Maps, be sure to load it carefully as it may appear gray on the second attempt

BS Modal was improperly invoked, leading to an illegal instantiation

How to dynamically load a component in Angular 5 and open a sidenav

Stop users from switching to other tabs within mat-tab-group without using ViewChild

Implement the click event binding using classes in Angular 2

Managing errors with the RxJS retry operator

Setting up the TypeScript compiler locally in the package.json file

Is there any re-rendering optimization feature in Angular 2?

RXJS buffering with intermittent intervals

A comprehensive guide to dynamically rendering components and implementing dynamic CSS in Angular 6

Could the repeated utilization of BehaviorSubject within Angular services indicate a cause for concern?

Challenges surrounding asynchronous functionality in React hooks

Troubleshooting: Issues with Angular 2 Dependency Injection

Encounter an Unexpected Token Issue when using NextJS-auth0 in Jest

Ways to disperse items within another item

Tailored validation for targeted field

Effortless method for combining PHP API with Angular 2 application on your computer