How to use rxjs for multiple inner nested subscribes

Question

In the below code I have used subscribe inside subscribe. This code works but the code structure is very bad. I would like to refactor this code using rxjs(forkjoin or mergemap).I'm not sure how to achieve this. Can someone help me with this? Any help is appreciated.

this.chapservice.cycle().subscribe((current) => {
      this.selectedCycleId = current.ratingCycleId;
      this.chapService
        .getChapterEvalWithSkills(
          this.activeUser.ipn,
          this.selectedRatingCycleId
        )
        .subscribe((response) => {
          console.log("response", response);
          if (response && response.length > 0) {
            this.chapterEvals = response;
          }
        });
      this.chapservice
        .getIsitEmployeeStatus(this.activeUser.ipn, this.selectedCycleId)
        .subscribe((sdpStatus) => {
          this.activeUserStatus = sdpStatus;
       if (this.activeUserStatus.statusDescription == 'SUBMITTED') {
                 //do something
            }
        });
    });

The inner subscribe do you want it to be subscribed full time or just executed once — deepak thomas, Nov 23 '20 at 04:28

Pankaj Parkar · Accepted Answer · 2020-11-23T05:14:34.083

2

You have to use combination of forkJoin and switchMap.

Why switchMap? - because you have dependent values that can fulfilled by sequential execution only.
Why forkJoin? - You can use either forkJoin or mergeMap here.

Code

this.chapservice.cycle().pipe(
  switchMap((current: any) => 
     forkJoin(
        this.chapService.getChapterEvalWithSkills(
           this.activeUser.ipn,
           this.selectedRatingCycleId
        ),
        this.chapservice.getIsitEmployeeStatus(this.activeUser.ipn, current.ratingCycleId)
     )
  )
).subscribe(([chapterEvals, sdpStatus]) => {
      console.log(chapterEvals, sdpStatus);
      if (chapterEvals && chapterEvals.length > 0) {
        this.chapterEvals = chapterEvals;
      }
      this.activeUserStatus = sdpStatus;
      if (this.activeUserStatus.statusDescription == 'SUBMITTED') {
             //do something
        }
    });
});

edited Nov 23 '20 at 05:14

answered Nov 23 '20 at 04:37

Pankaj Parkar

134,766
23
234
299

Thank you for your answer. Why can't we use merge map in this? – mohammed fahimullah Nov 23 '20 at 04:49
Im getting 2 errors.!.Property ratingycycleId does not exist of type unknown. 2.property subscribe does not exist on type OperatorFunction.Any idea why? – mohammed fahimullah Nov 23 '20 at 04:59
1

@mohammedfahimullah try updating `(current: any)` in `switchMap`, check updated answer – Pankaj Parkar Nov 23 '20 at 05:08
Property 'subscribe' does not exist on type 'OperatorFunction' What about this error? – mohammed fahimullah Nov 23 '20 at 05:10
1

@mohammedfahimullah check updated answer. Closing parenthesis was missing before subscribe :D – Pankaj Parkar Nov 23 '20 at 05:14
Thank for your answer. – mohammed fahimullah Nov 23 '20 at 05:34
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/224951/discussion-between-mohammed-fahimullah-and-pankaj-parkar). – mohammed fahimullah Nov 23 '20 at 05:56

How to use rxjs for multiple inner nested subscribes

1 Answers1