How to make nested Observable calls in Angular2

You should read up on rxjs's operators a little. Your examples are very verbose and use flatMap and map in a way they're not supposed to be used. Also your first example can't work, because you're not subscribing to the Observable.

This will do what you need:

ngOnInit() {    this.userService.getUser().pipe(        tap(u => this.user = u),        flatMap(u => this.userService.getPreferences(u.username))      ).subscribe(p => this.preferences = p);}

legacy:

Before version 5.5 rxjs exclusively used prototype-based operators.This code is functionally equivalent to the above:

ngOnInit() {    this.userService.getUser()        .do(u => this.user = u) //.do just invokes the function. does not manipulate the stream, return value is ignored.        .flatMap(u => this.userService.getPreferences(u.username))        .subscribe(p => this.preferences = p);}

Alright, so after a day of struggling and compiling information from the Internet here is what I learned about chaining Observables (Calling Observables in a sequence - one after the other):

I am working on an Angular2 (4) website and this site uses a java backend API to get/set/modify the information in the database.

My problem was that I had to make two API (HTTP POST) calls in a sequence which returns Observables (RxJS).

I have Operation1 and Operation2. Operation 2 Should execute after the completion of operation1.

Variant1 -> At first I did it one inside other (like nested functions in javascript):

     this.someService.operation1(someParameters).subscribe(        resFromOp1 => {          this.someService.operation2(otherParameters).subscribe(            resFromOp2 => {              // After the two operations are done with success              this.refreshPageMyFunction()             },            errFromOp2 => {              console.log(errFromOp2);            }          );        },        errFromOp1 => {          console.log(errFromOp1);        }      );

Despite this code is legit and working, I had the requirement to chain these Observables one after another like how it is done with async functions with Promises. One way is to convert Observables to Promises.

Onother way is to use RxJS flatMap:

Variant2 -> Another way is to do this with flatMap which as I understood is similar to Promises then:

   this.someService.operation1(someParameters)    .flatMap(u => this.someService.operation2(otherParameters))    .subscribe(function(){        return this.refreshPageMyFunction()      },      function (error) {        console.log(error);      }    );

Variant3 -> The same with Arrow functions:

   this.someService.operation1(someParameters)    .flatMap(() => this.someService.operation2(otherParameters))    .subscribe(() => this.refreshPageMyFunction(),      error => console.log(error)    );

The methods which return Observables are basically these:

  operation1(someParameters): Observable<any> {    return this.http.post('api/foo/bar', someParameters);  }  operation2(otherParameters): Observable<any> {    return this.http.post('api/some/thing', otherParameters);  }

Additional resources and useful comments:

This post approved answer by @j2L4e: https://stackoverflow.com/a/40803745/2979938https://stackoverflow.com/a/34523396/2979938https://stackoverflow.com/a/37777382/2979938

The version 1 is the best and should works, you just forgot to subscribe to :

 ngOnInit() {    this.userService.getUser()        .flatMap(u => {            this.user = u; // save the user            return Observable.of(u); // pass on the Observable        })        .flatMap(u => this.userService.getPreferences(this.user.username)) // get the preferences for this user        .map(p => {            this.preferences = p; // save the preferences        })        .subscribe();}