Subscribing to a nested Observable

by

I’d do it like the following:

function mockRequest() {
    return Observable.of('[{"id": 1}, {"id": 2}, {"id": 3}]');
}
function otherMockRequest(id) {
    return Observable.of(`{"id":${id}, "desc": "description ${id}"}`);
}

class ItemsService {
    fetchItems() {
        return mockRequest()
            .map(res => JSON.parse(res))
            .concatAll()
            .mergeMap(item => this.fetchItem(item));
    }

    fetchItem(item: Item) {
        return otherMockRequest(item.id)
            .map(res => JSON.parse(res));
    }
}

let service = new ItemsService();
service.fetchItems().subscribe(val => console.log(val));

See live demo: http://plnkr.co/edit/LPXfqxVsI6Ja2J7RpDYl?p=preview

I’m using a trick with .concatAll() to convert an array of Objects such as [{"id": 1}, {"id": 2}, {"id": 3}] into separate values emitted one by one {"id": 1}, {"id": 2} and {"id": 3} (as of now it’s an undocumented feature). Then I use mergeMap() to fetch their content in a separate request and merge it’s result into the operator chain.

This plnkr example prints to console:

{ id: 1, desc: 'description 1' }
{ id: 2, desc: 'description 2' }
{ id: 3, desc: 'description 3' }

More Related Contents:

  1. What is the difference between Subject and BehaviorSubject?
  2. How to cancel/unsubscribe all pending HTTP requests in Angular 4+
  3. How to make a sequence of http requests in Angular 6 using RxJS
  4. Angular subscribe elegant
  5. Best way to import Observable from rxjs
  6. TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable
  7. Behaviour subject initial value null?
  8. rxjs/Subject.d.ts error : Class ‘Subject’ incorrectly extends base class ‘Observable’
  9. Rxjs Retry with Delay function
  10. What is pipe for in RxJS?
  11. How to throw error from RxJS map operator (angular)
  12. How to return observable from subscribe
  13. Property ‘toPromise’ does not exist on type ‘Observable’
  14. How to return value inside subscribe Angular 4
  15. Do I need to `complete()` takeUntil Subject inside ngOnDestroy?
  16. How to pass results between chained observables
  17. How do I create a singleton service in Angular 2?
  18. Call child component method from parent class – Angular
  19. How can I unit test a component that uses the Router in Angular?
  20. localStorage is not defined (Angular Universal)
  21. Angular 6: saving data to local storage
  22. Uncaught Error: Unexpected directive ‘MyComboBox’ imported by the module ‘AppModule’. Please add a @NgModule annotation
  23. Recording the web page by using Record RTC with Angular
  24. access SASS values ($colors from variables.scss) in Typescript (Angular2 ionic2)
  25. How to get rid of the warning .ts file is part of the TypeScript compilation but it’s unused
  26. How can I create an observable with a delay
  27. Angular 2 Observable with multiple subscribers
  28. RxJs get value from observable
  29. How to create an Observable from static data similar to http one in Angular?
  30. How to generate components in a specific folder with Angular CLI?

Leave a Comment