Javascript rxjs - do something when last value emitted from observable

Question

Following situation: I make two async http calls.

• one for getting a list of names
• another for making something for each name in the list/array

---

For the sake of simplicity: Lets imagine the first call returns me a list of names: ['marta', 'edgar', 'david'] . And the second http call post the names in the database. My implementation works fine for this operational requirement. It looks as follows:

public deployAllPartners(): void {
    this.isDeploying = true;
    this.getAllPartner().subscribe(shortname => this.adminService.deploySinglePartnerForTesting(shortname).subscribe());
}

private getAllPartner(): Observable<string> {
    return this.partnerService.getPartnersOverview()
        .flatMap((partnerList) => partnerList.partner) <== returns an array
        .map((partner) => partner.shortname);
}

Problem:

Now what I want is that the boolean isDeploying is turning to false when the last name was deployed. Is there any RxJS Operator which is triggered when the last shortname is deployed? Maybe something like finally() or something along those line?. For completness: The boolean is there for a loading gif in the HTML and the gif is only showing up in the UI when isDeploying=true and of course is hidden when the value is false.

Answer 1

If you want to "end" the chain after a source Observable completes you can use concat or since RxJS 6.2.0 also the new endWith operator as well.

Or if you don't want to append any values and just do some side-effect you can use the complete handler in your subscribe() call.

import { from, of } from 'rxjs';
import { concat } from 'rxjs/operators';

from(['a', 'b', 'c'])
  .pipe(
    concat(of('end')),
  )
  .subscribe({
    next: console.log,
    complete: () => console.log('completed'),
  });

See live demo: https://stackblitz.com/edit/rxjs6-demo-tplu6y?file=index.ts

Answer 2

Use finalize for RXJS6:

this.getAllPartner().
.pipe(
    finalize(() => this.isDeploying = false)
  )