How to make nested Observable calls in Angular2

Question

I am having some troubles making nested Observable calls. By that I mean a call to a http service that retrieve a user, then getting the id from the user to make another htt

Answer 1

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 {
    return this.http.post('api/foo/bar', someParameters);
  }

  operation2(otherParameters): Observable {
    return this.http.post('api/some/thing', otherParameters);
  }

Additional resources and useful comments:

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

https://stackoverflow.com/a/34523396/2979938

https://stackoverflow.com/a/37777382/2979938