Improve disorganized subscription processes to enhance future subscriptions

Question

Improve disorganized subscription processes to enhance future subscriptions

While diving into my Angular learning journey, I stumbled upon Observables which intrigue me but still hold a mystery for me. One specific challenge I faced was having an Observable that depended on another Observable to complete before proceeding.

This led me to nesting the observables to tackle some sequence issues arising from their independent nature. However, as I explored this approach further, it seemed to become a bit messy, and I anticipate needing to introduce more nested observables down the line.

Here's a snippet of the code illustrating my current structure...

    this.permissionService.build().subscribe( p =>{
        this.Headers = p; 
        this.accessService.buildTitlesWithMenus().subscribe( q => {
          this.treeNodes = this.accessService.buildTreeTable(q); 
        });                 
    });

angular typescript observable

Answer 1

Answer №1

this.authorizationService.create().pipe(
  tap(a => this.Headers = a),
  switchMap(a => this.menuService.generateMenus()),
).subscribe(m => this.treeNodes = this.menuService.buildTreeTable(m));

This method is recommended for handling the task at hand.

Don't hesitate to reach out if you have any queries!

Answer 2

this.authorizationService.create().pipe(
  tap(a => this.Headers = a),
  switchMap(a => this.menuService.generateMenus()),
).subscribe(m => this.treeNodes = this.menuService.buildTreeTable(m));

This method is recommended for handling the task at hand.

Don't hesitate to reach out if you have any queries!

Answer 3

Answer №2

Here is a traditional approach to structuring your code in a readable manner:

Utilize the forkJoin method from rxjs

This method accepts an Array of ObservableInput or a dictionary Object of ObservableInput. It returns an Observable that emits either an array of values in the exact same order as the passed array, or a dictionary of values in the same shape as the passed dictionary.

private buildPermissionService() {
    return this.permissionService.build();
}

private buildTitlesWithMenus() {
    return this.accessService.buildTitlesWithMenus();
}

private buildMenuAndPermissions() {
    return forkJoin(
        this.buildPermissionService(),
        this.buildTitlesWithMenus()).subscribe(result => {
        this.Headers = result[0];
        this.treeNodes = this.accessService.buildTreeTable(result[1]);
    });
}

Opt for the switchMap method provided by rxjs

This method projects each source value to an Observable which is merged in the output Observable, emitting values only from the most recently projected Observable.

this.permissionService.build().pipe(
  tap(p => this.Headers = p),
  switchMap(p => this.accessService.buildTitlesWithMenus()),
).subscribe(q => this.treeNodes = this.accessService.buildTreeTable(q));

There are more methods available in the documentation. For example, if you need to not only get the result but also combine it, you can consider using zip or combineAll.

Answer 4

Here is a traditional approach to structuring your code in a readable manner:

Utilize the forkJoin method from rxjs

This method accepts an Array of ObservableInput or a dictionary Object of ObservableInput. It returns an Observable that emits either an array of values in the exact same order as the passed array, or a dictionary of values in the same shape as the passed dictionary.

private buildPermissionService() {
    return this.permissionService.build();
}

private buildTitlesWithMenus() {
    return this.accessService.buildTitlesWithMenus();
}

private buildMenuAndPermissions() {
    return forkJoin(
        this.buildPermissionService(),
        this.buildTitlesWithMenus()).subscribe(result => {
        this.Headers = result[0];
        this.treeNodes = this.accessService.buildTreeTable(result[1]);
    });
}

Opt for the switchMap method provided by rxjs

This method projects each source value to an Observable which is merged in the output Observable, emitting values only from the most recently projected Observable.

this.permissionService.build().pipe(
  tap(p => this.Headers = p),
  switchMap(p => this.accessService.buildTitlesWithMenus()),
).subscribe(q => this.treeNodes = this.accessService.buildTreeTable(q));

There are more methods available in the documentation. For example, if you need to not only get the result but also combine it, you can consider using zip or combineAll.

Improve disorganized subscription processes to enhance future subscriptions

Answer №1

Answer №2

Similar questions

Injecting AngularJS together with TypeScript and Restangular to optimize application performance

Using typescript with Ramda's filter and prop functions can lead to unexpected errors

Enforce directory organization and file naming conventions within a git repository by leveraging eslint

What could be causing issues when trying to update the profile picture effectively?

What is the definition of a non-arrow React functional component in TypeScript?

Access a single document from Firestore:

Angular: How to Disable Checkbox

Can someone confirm if I am importing this png file correctly? I am encountering an error with Vite, here is my code

Slow initialization of the Angular APP_INITIALIZER for the application's configuration

Finding the key type in an interface

Oops! We encountered an issue when trying to set the property 'isAdmin' to null

Utilize the MD_CARD component exclusively from Material Design 2, omitting the rest of the features from the Material

"Trouble accessing the URL" error encountered when trying to load templateUrl for dynamic components in Angular 2

When the component is initialized, the mat-autocomplete input element displays a [object object]

Ending the Infinite Scroll in Ionic 3 When Data Runs Out

Is it possible to establish a connection between Firebase Storage and HTML using TypeScript without Angular or React in IntelliJ?

How Angular services transmit information to components

Upgrading $compile in Angular

Using TypeScript to access the value of the parent scope within a directive controller

Issue with Undefined Variable in Angular 2 and Ionic Framework