Chaining RxJS Observables from http data in Angular2 with TypeScript

by

For your use case, I think that the flatMap operator is what you need:

this.userData.getUserPhotos('123456').flatMap(data => {
  this.userPhotos = data;
  return this.userData.getUserInfo();
}).subscribe(data => {
  this.userInfo = data;
});

This way, you will execute the second request once the first one is received. The flatMap operator is particularly useful when you want to use the result of the previous request (previous event) to execute another one. Don’t forget to import the operator to be able to use it:

import 'rxjs/add/operator/flatMap';

This answer could give you more details:

If you want to only use subscribe method, you use something like that:

this.userData.getUserPhotos('123456')
    .subscribe(
      (data) => {
        this.userPhotos = data;

        this.userData.getUserInfo().subscribe(
          (data) => {
            this.userInfo = data;
          });
      });

To finish, if you would want to execute both requests in parallel and be notified when all results are then, you should consider to use Observable.forkJoin (you need to add import 'rxjs/add/observable/forkJoin'):

Observable.forkJoin([
  this.userData.getUserPhotos(),
  this.userData.getUserInfo()]).subscribe(t=> {
    var firstResult = t[0];
    var secondResult = t[1];
});

More Related Contents:

  1. Angular 2 – Return data directly from an Observable
  2. RxJs get value from observable
  3. How to create an Observable from static data similar to http one in Angular?
  4. RxJs Array of Observable to Observable of Array
  5. How to return value from function which has Observable subscription inside?
  6. Angular 2: Convert Observable to Promise
  7. Angular 2 beta.17: Property ‘map’ does not exist on type ‘Observable’
  8. Angular 2 2.0.0-rc.1 Property ‘map’ does not exist on type ‘Observable’ not the same as issue report
  9. TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable
  10. Get route query params
  11. How to return observable from subscribe
  12. How to return value inside subscribe Angular 4
  13. How do I return the response from an Observable/http/async call in angular?
  14. Angular/RxJS When should I unsubscribe from `Subscription`
  15. *ngFor running an infinite loop in angular2
  16. How to catch exception correctly from http.request()?
  17. When I refresh my website I get a 404. This is with Angular2 and firebase
  18. WARNING: sanitizing unsafe style value url
  19. Angular2: How to load data before rendering the component?
  20. Extending component decorator with base class decorator
  21. How to avoid imports with very long relative paths in Angular 2?
  22. Angular no provider for NameService
  23. How to cancel/unsubscribe all pending HTTP requests in Angular 4+
  24. Accessing a property in a parent Component
  25. TypeScript error in Angular2 code: Cannot find name ‘module’
  26. Behaviour subject initial value null?
  27. How can I create an observable with a delay
  28. How to implement Custom Async Validator in Angular2/4/5
  29. Import gapi.auth2 in angular 2 typescript
  30. What exactly $event object do in Angular 2?

Leave a Comment