CODEWITHSUNDEEP
angularrxjsangularfire2
rhysclay
rhysclay

Reputation: 1683

Angular2 rxjs switchMap with inner map subscribtion emitting multiple observables

I have a switch map with an inner map function which is returning multiple obersables like so:

  this.fb
    .getUsersGroupsAsObservable(user.uid, 'contacts')
    .switchMap(groups => {
      return groups.map(group => this.fb.getJobsbyGroup(group.id));
    })
    .subscribe(res => {
      console.log(res); // emits Observable {_isScalar: false, source: Observable, operator: MapOperator}
      this.job$ = res;
    });
});

This is running twice correctly and returning two observables like so:

Observable {_isScalar: false, source: Observable, operator: MapOperator}
Observable {_isScalar: false, source: Observable, operator: MapOperator}

Is there any way to return a list of observables (thinking AngularFireList) which I can then render with an async pipe?

Update: @concat helped me to get an answer to this (but for reason the answer was deleted), I updated my code as follows (its now working perfectly):

  this.fb
    .getUsersGroupsAsObservable(user.uid, 'contacts')
    .switchMap(groups =>
      combineLatest(groups.map(group => this.fb.getJobsbyGroup(group.id))),
    )
    .subscribe(res => {
      console.log(res);
      this.jobs = [].concat.apply([], res);
    });

Upvotes: 0

Views: 4834

Answers (1)

rhysclay
rhysclay

Reputation: 1683

@concat helped me to solve this problem, all I needed to do was to use combineLatest and that would combine all of my arrays into a single array, I then flattened that array, there might be a simpler way to do this but hey it works:

  this.fb
    .getUsersGroupsAsObservable(user.uid, 'contacts')
    .switchMap(groups =>
      combineLatest(groups.map(group => this.fb.getJobsbyGroup(group.id))),
    )
    .subscribe(res => {
      console.log(res);
      this.jobs = [].concat.apply([], res);
    });

Upvotes: 2

Related Questions