how to subscribe in a conditional subscription result

Question

I'm trying to perform 3 async actions (observables), one inside the other. 1. The first observable is the response of a modal dialog eventEmiter - the rest of the flow is depended on its response (let say that the modal return boolean emiter concerning to: "Do you want to delete the item"). 2. The second observable is the update (delete) action 3. The third is fetching back the new data after the deletion.

I'm using rxjs- and try to figure out how to do it without subscribe in a subscribe. See my code:

subscriptions : Subscription[] = [];

openDeleteDialog(data : any)
{
    const modalRef : NgbModalRef = this.modalService.open(ConfirmationDialogComponent); //Modal  dialoge reference
    this.subscriptions.push(modalRef.componentInstance.passResult.subscribe( 
    (result =>//This is the response from the modal dialog
      {
        if (result)
        {
          let updateApi : UpdateApi = new UpdateApi(data);
          this.srv.updateData(updateApi).pipe( //This is the update operation
            tap(() =>
            { 
              this.srv.getData(); //This is the fetch data operation
            }
            )

          ).subscribe();
        }
      }
    )
    ));
}

David G. · Accepted Answer · 2019-10-27T14:41:59.417

You can use pipe, filter and switchMap for that:

subscriptions : Subscription[] = [];

openDeleteDialog(data : any)
{
  const modalRef : NgbModalRef = this.modalService.open(ConfirmationDialogComponent); //Modal  dialoge reference
  this.subscriptions.push(
    modalRef.componentInstance.passResult
     .pipe(
       filter((result) => !!result),
       switchMap((result) => {
          let updateApi : UpdateApi = new UpdateApi(data);
          return this.srv.updateData(updateApi);
       }),
       switchMap((updateResult) => this.srv.getData())
     ).subscribe((getDataResult) => console.log(getDataResult))
  );
}

First you use filter to only pass the data when result is something, then you switch to a new observable, the update data observable, and at the same time you pipe that one to switch to the get data observable. That way you chain the observables, I am guessing you need to wait for the update data result to get the data again.

EDIT: Additional piece of information, you were using tap to call this.srv.getData(), but if that returns an observable with the http request, that request is never going to be called, since you need to subscribe to it in order for the request to be made. As a general rule I use the tap pipe for collateral effects that will only need the result of the observable but will not modify anything else that is observable related, if that makes any sense.

score 0 · Answer 2 · answered Oct 27 '19 at 09:35

You can use mergeMap and iif operator;

const subscription = modalRef.componentInstance.passResult
  .pipe(mergeMap(result => iif(() => result, of(result))))
  .pipe(mergeMap((result) => {
    let updateApi : UpdateApi = new UpdateApi(data);
    return this.srv.updateData(updateApi);
  }))
  .pipe(tap(() => this.srv.getData()))
  .subscribe();
this.subscriptions.push(subscription);

Adrian Brand · Answer 3 · 2019-10-27T22:21:47.097

Instead of having a subscriptions array use a subject with takeUntil

finalised = new Subject<void>();

and then have a take until as the last operator in your observable chain

modalRef.componentInstance.passResult.pipe(
  filter(result => result)
  switchMap(_ => this.srv.updateData(new UpdateApi(data)),
  switchMap(_ => this.srv.getData()),
  takeUntil(this.finialised)
).subscribe(updatedDataAfterDelete => {
  // Do stuff with updated data
});

and in your ngOnDestroy

this.finialised.next();
this.finialised.complete();

That way you can have all subscriptions completed by a single subject rather that pushing them into a subscriptions array.

how to subscribe in a conditional subscription result

3 Answers3