How to call multiple apis call one after another

Question

I am learning RxJS. I have 3 api call's, I need to make 2nd api call, and pass it's data as a parameter to 3rd api call. I tried this:

    checkPermission(permissionName: string): Observable<boolean> {
    this.check(this.p1)
      .pipe(
        switchMap(res => {
          const shouldCheck = res.Value;
          if (shouldCheck.toLowerCase() === 'true') {
            return this.checkPermission(permissionName).pipe(
              map(result => {
               
                return result;
              })
            );
          } else return of(true);
        })
      )
      .subscribe(permission => {
       
      });       
    }

But getting syntax error.

@AdrianKokot where to place that bracket, i am not able to understand — , Sep 28 '21 at 08:55
read this https://stackoverflow.com/questions/34104638/how-can-i-chain-http-calls-in-angular-2 — Girish Sadanandan, Sep 28 '21 at 08:59
I just want to send the data got from 2nd api to 3rd api as a parameter — , Sep 28 '21 at 09:01

Octavian Mărculescu · Accepted Answer · 2021-09-28T10:31:59.060

The code you posted is not very comprehensible, but I'll try to make something usable out of it:

  checkPermission(permissionName: string): Observable<boolean> {
    return this.checkSetting(this.p1).pipe(
      map((res) => res.SysConfig.Value.toLowerCase() === 'true'),
      switchMap((shouldCheck) =>
        iif(
          () => shouldCheck,
          this.permission(this.p2).pipe(
            switchMap((data) =>
              this.hasPermission(permissionName, data.SysConfig.Value)
            ),
            // hoping that res.permission is a boolean
            map((res) => res.permission)
          ),
          of(true)
        )
      )
    );
  }

You should also omit the subscribe if you plan on returning Observable<boolean>. You can subscribe to the observable returned by this method in the place where you call it:

this.authService.checkPermission(permission).subscribe(hasPermission => {
  console.log(`User ${hasPermission ? 'has' : 'does not have'} ${permission} permission`);
});

I just updated working and non working code. please check – Sep 28 '21 at 09:14 — , Sep 28 '21 at 09:14
I am facing one serious issue, please check your chat – Sep 28 '21 at 10:17 — , Sep 28 '21 at 10:17

navnath · Answer 2 · 2021-09-28T12:06:46.420

Try it, I have not tested though.

   checkPermission(permissionName: string): Observable<boolean> {
      return this.checkCompanySettingForPermission(this.p1)
          .pipe(
            switchMap(res => this.permissionAPI(res, permissionName)),
            tap(permission => this.$permissionSub.next(permission)),
            switchMap(_=> this.$permissionSub.asObservable())
          )
     }
    
    permissionAPI(res :any, permissionName: string): Observable<any>{
        const shouldCheck = res.SysConfig.Value;
        if (shouldCheck.toLowerCase() === 'true') {
           return this.permissionAPI2(permissionName);
        }
        return of(true);
    }

  permissionAPI2(permissionName: string) :Observable<boolean>{
    return this.checkCompanySettingForPermission(this.p2).pipe(
       switchMap(data => 
        this.hasPermission(permissionName, data.SysConfig.Value).pipe(
              map(( {permission})=>permission)
            )
        )
     );
  }

score 0 · Answer 3 · answered Sep 28 '21 at 09:05

You should use switchMap operator in proper order i.e.

.pipe(
    switchMap(() => {
        return this.someFunctionThatReturnsObservable();
    }),
    // here you will have access to data you've returned in previous (in data variable)
    switchMap((data) => {
        return this.someOtherRequest(data.param1, data.param2).pipe(
            map(result => {
              return result.permission;
            })
        );
    })
)

Remember that you need to place rxjs operators one after another in pipe separating them with coma. Problem is that you have incorrect syntax trying to put some code without operators inside pipe, these lines are problem here:

return this.permission(this.p2).pipe(
    const shouldEncrypt = res.SysConfig.Value;

It is not fully clear what exactly you want to do here, but I assume that you want to conditionally return request or empty observable, you need to add operator before placing above code.

I just updated working and non working code. please check – Sep 28 '21 at 09:14 — , Sep 28 '21 at 09:14

How to call multiple apis call one after another

3 Answers3