Angular waiting for multiple observables to complete

Question

I'm new to Angular, let alone reactive programming and I'm having a hard time wrapping my head around the libraries and understanding how everything is supposed to work together.

There are already multiple questions on Stack Overflow concerning this, but none of the ones I see address the situation I'm dealing with here.

I have two Observables object lists. var obsrv1 = Observable<Object1[]>, var obsrv2 = Observable<Object2[]>.

Let's say I have all the underlying logic for API calls and stuff, and normally, when I do something like obsrv1.subscribe(results => this.objectArray = results), it's going to do it's asynchronous thing and ultimately get me my data.

Now, I have an issue with my two observables, and that is that one of them is reliant upon the other list. When the two lists of data complete, I need to do an action to join them together into another kind of object.

One solution to this is to just do something like this:

obsrv1.subscribe(
  obsrv1Results => {
  this.object1Array = obsrv1Results
  },
  err => {},
  () => {
    obsrv2.subscribe(
      obsrv2Results => {
        this.object2Array = obsrv2Results
      },
      err => {},
      () => onDataLoadComplete();
    );
  }
);

This works, but it feels very hacky. I've gathered that there is a much more elegant way to do this, and it sounds like people suggest doing something with forkJoin, but I have no idea how to get it to work. It sounds like they suggest doing, forkJoin([obsrv1, obsrv2]).subscribe(...), but doing this with my code yields no results and the subscribe callback never gets called. Some folks say to do, forkJoin([obsrv1.first(), obsrv2.first()]), but doing that doesn't work either and the only results I get are literally just , when I do a console.log.

For what it's worth, in my application I am using ngrx/store and ngrx/effects. The call to retrieve my data looks like this:

this.store.select(state => state.myDataContainer.dataList) which returns a Store<MyDataType[]>. From what I have gathered, Store<T> objects must be observables of some form because you can subscribe to them.

How can I go about retrieving both my sets of data asynchronously and have a callback fire when both the sets of data are complete?

If you're going to downvote me, at least tell me why I'm an idiot instead of implying so. Maybe Stack Overflow would be a bit less toxic for people trying to learn. — Zulukas
I imagine the down vote is from someone who feels like this question has been asked 100 times on SO; it even feels that way to me. Asking a down voter for an explanation is nearly a waste of time. What does your data service look like? I think that is where you want to do the forkJoin. This may be helpful. — R. Richards

Robbert Kooiman Robbert Kooiman · Accepted Answer · 2018-04-24T11:20:07

It sounds like you should use the .pipe(flatMap()) operator. You can use that to use the result of one Observable and return another Observable, which is what you're describing you want to do.

The ReactiveX.io website is pretty good at visualising and explaining these things.

Here's an example that works out of the box:

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import { flatMap } from 'rxjs/operators';

//emit 1
const source = Observable.of(1);
//do something with value
const example = source.pipe(flatMap(value => {return Observable.of(value + 10)}));
//output: 11,12,13,14,15
const subscribe = example.subscribe(val => console.log(val));

And here's what your code could look like implementing this:

obsrv1.pipe(
  flatMap(obsrv1Results => {
    this.object1Array = obsrv1Results;
    return obsrv2;
  })
).subscribe(obsrv2Results => {
  this.object2Array = obsrv2Results;
  onDataLoadComplete();
});

Don't forget to import flatMap if you need it:

import { flatMap } from "rxjs/operators";

Good luck!

Angular waiting for multiple observables to complete

1 Answers