Executing a secondary API based on the data received from the initial API call

Question

Executing a secondary API based on the data received from the initial API call

Currently, I am diving into the world of RxJS. In my project, I am dealing with 2 different APIs where I need to fetch data from the first API and then make a call to the second API based on that data. Originally, I implemented this logic using the subscribe() method as shown below:

checkPermission(permissionName: string): Observable<boolean> {
    this.checkCompanySettingForPermission(
      this.pageLevelCompanySettingName
    ).subscribe(res => {
      const shouldCheck = res.Value;
      if (shouldCheck.toLowerCase() === "true") {
        this.hasPermission(permissionName).subscribe(res => {
          this.$permissionSub.next(res.permission);
        });
      } else {
        this.$permissionSub.next(true);
      }
    });
    return this.$permissionSub.asObservable();
  }

However, I'm now looking for a way to avoid nesting subscribe() methods within each other. Is there any RxJS operator that can help me achieve this?

I attempted to use switchMap() but encountered numerous syntax errors in the process. Any guidance or assistance would be greatly appreciated.

javascript angular typescript rxjs

Answer 1

Answer №1

To achieve this functionality, you can utilize one of the Higher-Order RxJS mapping operators such as: switchMap, mergeMap, concatMap to combine the source observable with a new one.

In your specific case, using switchMap or mergeMap, we should ultimately return a new observable at the end to be merged with the original checkCompanySettingForPermission observable.

If the condition is met, we will return the this.hasPermission observable; otherwise, we will return a new observable using the of function with the necessary value (true in this scenario).

You can implement it like this:

checkPermission(permissionName: string): Observable<boolean> {
  this.checkCompanySettingForPermission(this.pageLevelCompanySettingName)
    .pipe(
      switchMap(res => {
        const shouldCheck = res.Value;
        if (shouldCheck.toLowerCase() === 'true') {
          // switchMap to the new observable and then map it to return only the permission.
          return this.hasPermission(permissionName).pipe(
            tap(result => {
              // perform some actions on the result before mapping it to the `result.permission`
            }),
            map(result => result.permission)
          );
        } else {
          // return an observable of true to be processed within subscribe.
          return of(true);
        }
      })
    )
    .subscribe(permission => this.$permissionSub.next(permission));

  return this.$permissionSub.asObservable();
}

If you are not using this.$permissionSub elsewhere, you can remove it from the method above and simply return this.checkCompanySettingForPermission(...) without subscribing to it. You can then call this method in your component like so:

// Example
this.service.checkPermission(addPermission).subscribe((value) => {
   console.log(value)
})

Answer 2

To achieve this functionality, you can utilize one of the Higher-Order RxJS mapping operators such as: switchMap, mergeMap, concatMap to combine the source observable with a new one.

In your specific case, using switchMap or mergeMap, we should ultimately return a new observable at the end to be merged with the original checkCompanySettingForPermission observable.

If the condition is met, we will return the this.hasPermission observable; otherwise, we will return a new observable using the of function with the necessary value (true in this scenario).

You can implement it like this:

checkPermission(permissionName: string): Observable<boolean> {
  this.checkCompanySettingForPermission(this.pageLevelCompanySettingName)
    .pipe(
      switchMap(res => {
        const shouldCheck = res.Value;
        if (shouldCheck.toLowerCase() === 'true') {
          // switchMap to the new observable and then map it to return only the permission.
          return this.hasPermission(permissionName).pipe(
            tap(result => {
              // perform some actions on the result before mapping it to the `result.permission`
            }),
            map(result => result.permission)
          );
        } else {
          // return an observable of true to be processed within subscribe.
          return of(true);
        }
      })
    )
    .subscribe(permission => this.$permissionSub.next(permission));

  return this.$permissionSub.asObservable();
}

If you are not using this.$permissionSub elsewhere, you can remove it from the method above and simply return this.checkCompanySettingForPermission(...) without subscribing to it. You can then call this method in your component like so:

// Example
this.service.checkPermission(addPermission).subscribe((value) => {
   console.log(value)
})

Answer 3

Answer №2

Here is a suggestion for the format you can try.

validateAccess(permission: string): Observable<boolean> {
  this.verifyCompanySettingForAccess(this.settingsName)
    .pipe(
      map(res => res?.Value.toLowerCase() === 'true'
          ? this.checkPermission(permission).pipe(
               map(result => result.granted)
            )
          : of(true)

       ),
      switchMap(observable => observable)
    )
    .subscribe(accessGranted => this.$accessStatus.next(accessGranted));

  return this.$accessStatus.asObservable();
}

Answer 4

Here is a suggestion for the format you can try.

validateAccess(permission: string): Observable<boolean> {
  this.verifyCompanySettingForAccess(this.settingsName)
    .pipe(
      map(res => res?.Value.toLowerCase() === 'true'
          ? this.checkPermission(permission).pipe(
               map(result => result.granted)
            )
          : of(true)

       ),
      switchMap(observable => observable)
    )
    .subscribe(accessGranted => this.$accessStatus.next(accessGranted));

  return this.$accessStatus.asObservable();
}

Executing a secondary API based on the data received from the initial API call

Answer №1

Answer №2

Similar questions

What is the process for acquiring a comprehensive catalog of Node.js modules?

Error in Angular Google Maps Component: Unable to access the 'nativeElement' property as it is undefined

Preventing responsive elements from loading with HTML scripts

Encountered an issue with running tests in vscode-test - runTests function throwing

What steps can be taken in Next.js to display a 404 page when data is not retrieved from the Wordpress admin?

Alert: Next.js 13 console error detected

What is the best way to connect my data with my Backbone Views?

Show the "Splash" picture, then switch to a newly uploaded image and show it for a set amount of time

Comparison: Chrome extension - utilizing default pop-up vs injecting a div directly into the page

Updating the Background Image Based on Text Input in JavaScript

UI5 Tooling generated an error stating that "sap is not defined" after a self-contained build

Is there a way to prevent my timer from resetting whenever I refresh the page?

When using the HTML5 draw img feature, only the top 1/4 of the image will be

What could be causing my LESS files not to compile properly in grunt?

Guidelines on dispatching events from Node.js/Express to Angular

Having trouble with ejs.filters?

Double submission issue with Angular form (multiple ajax requests)

Switching to Next.js

Error encountered while attempting to save a Mongoose post on Heroku, although it is successful

What is the best way to incorporate async and await into my functions within a Node.js environment?