29

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 http call, and finally render the results on screen.

1) HTTP GET 1 : get the User

2) HTTP GET 2: get the User's preferences passing a unique identifier as a parameter

This translates into the following code in component Blah.ts:

version 1 - this code does not display anything

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

version 2 - this code works but seems the wrong approach to me:

 this.userService.getUser().subscribe(u => {
            this.user = u;
            this.userService.getPreferences(this.user.username).subscribe(prefs => {
                this.preferences = prefs;
            });
        });

And this is the template:

<h3>User</h3>

<div class="row col-md-12">
    <div class="col-md-6">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">User details</h3>
            </div>
            <div class="panel-body">
                <table class="table table-condensed">
                    <thead>
                        <tr>
                            <th>Username</th>
                            <th>Full Name</th>
                            <th>Enabled</th>                                
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>{{user?.username}}</td>
                            <td>{{user?.fullName}}</td>
                            <td>{{user?.enabled}}</td>                          
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- end of col 1-->

    <div class="col-md-6">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">User preferences</h3>
            </div>
            <div class="panel-body">
                <table class="table table-condensed">
                    <thead>
                        <tr>
                            <th>Language</th>
                            <th>Locale</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>{{preferences?.preferences?.get('language')}}</td>
                            <td>{{preferences?.preferences?.get('locale')}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- end of col 2-->

</div>
<!-- end of row 1-->

I don't think there is any point in showing the service, which simply makes http get() calls like:

  http.get('http://blablah/users/')
        .map((response) => response.json())

Please suggest which is the best working approach to define a chain of Observables.

nuvio
  • 2,555
  • 4
  • 32
  • 58

4 Answers4

41

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);
}
j2L4e
  • 6,914
  • 34
  • 40
  • 2
    +1 - I just have one question, using this solution, what is the best way to handle errors that can be thrown by either service call? I understand that you can add an error handler within the subscribe method; however, that would only apply to the getPreferences service call. What's the cleanest way to capture errors both calls at a single point? assuming that they should both be handled in the same manner. Thanks – Sam Mar 08 '17 at 13:49
  • 3
    any errors will be passed all the way down the pipe – j2L4e Mar 08 '17 at 17:06
  • 1
    thanks for clarifying! I now better understand how this works, thank you. – Sam Mar 09 '17 at 11:43
  • Does a the .flatMap() wait for .do() to emit a value? – Michael Pell Jun 30 '17 at 19:48
  • What if it was for multiple users? – Always_a_learner Apr 10 '18 at 13:32
  • I've found a very useful article about this topic: https://namitamalik.github.io/Map-vs-FlatMap/ – Affilnost Apr 11 '18 at 19:30
  • Very useful having the rxjs 5.5 example here. Also worth mentioning that `flatMap` is an alias for `mergeMap` and `switchMap` can be used instead for restartable operations. – Caltor Nov 19 '19 at 11:22
10

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. enter image description here

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
cRAN
  • 195
  • 1
  • 2
  • 16
Combine
  • 3,894
  • 2
  • 27
  • 30
  • 4
    I like this reply, however, most asynchronous chain-cases involve passing a parameter from operation1 to operation2, could you perhaps add that to your examples instead of otherParameters? I understand your examples fully, but this would make them complete. – Undrium Feb 14 '18 at 09:07
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();
}
soywod
  • 4,377
  • 3
  • 26
  • 47
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

danday74
  • 52,471
  • 49
  • 232
  • 283