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

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()
        .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);
}

As of rxjs 5.5 you should use the pipeable operators:

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

Answer 2

you are correct, nested subscribes are wrong ...

flatmap is correct

this should help

https://embed.plnkr.co/mqR9jE/preview

or read this tutorial

https://gist.github.com/staltz/868e7e9bc2a7b8c1f754

some code ...

// responseStream: stream of JSON responses
var responseStream = requestStream
  // We use flatMap instead of map to prevent this stream being a metastream - i.e. stream of streams
  .flatMap(requestUrl => {
    // Convert promise to stream
    return Rx.Observable.fromPromise($.getJSON(requestUrl));
  }).publish().refCount(); // Make responseStream a hot observable, prevents multiple API requests
// see https://gist.github.com/staltz/868e7e9bc2a7b8c1f754#gistcomment-1255116

here request URL is an input emitted from a different stream / Observable.

now subscribe to responseStream

Answer 3

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/2979938

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

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

Answer 4

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();
}