Subscribing to a nested Observable

Question

I have an app that makes one http request to get a list of items and then makes an http request for each item in the list to get more detailed information about each item.

Answer 1

The problem you likely encountered is that you did not flatten enough.

flatMap or mergeMap will flatten Observables, Promises, Arrays, even generators (don't quote me on that last one), just about anything you want to throw at it.

So when you do .flatMap(items => items.map(item => this.fetchItem(item)), you are really just doing Observable> => Observable>

When you just do map you are doing Observable> => Observable>>.

What you need to do is first flatten out the Array and then flatten out each request:

class ItemsService {
  fetchItems() {
    return this.http.get(url)
    .map(res => res.json())
    // Implicitly map Array into Observable and flatten it
    .flatMap(items => items)
    // Flatten the response from each item
    .flatMap((item: Item) => this.fetchItem(item));
  }
}

Now the above works if you don't mind getting each item response individually. If you need to get all of the items then you should use forkJoin on all the inner values, but you would still need flatMap in order to flatten the resulting inner value:

fetchItems(): Observable {
  return this.http.get(url)
    .map(res => res.json())
    .flatMap(items => {
       const requests = items.map(item => this.fetchItem(item));
       return Rx.Observable.forkJoin(requests);
    });
}