How to map to multiple objects within one Observable array?

Question

I am using forkJoin to join two observable arrays together:

connect(): Observable<any[]> {
this.userId = this.authService.userId;
this.habits$ = this.habitService.fetchAllById(this.userId);
this.status$ = this.statusService.fetchAll();
this.joined$ = forkJoin([this.habits$, this.status$]).pipe(
  map(([habits, statuses]) =>
    habits.map(habit => ({
      ...habit,
      status: statuses.find(s => s.habitId === habit.habitId)
    })))
);
console.log(this.joined$);

return this.joined$;

In my mapping function I am mapping the habitId from my each habit-Observable to the habitId from my status-Observable.

Which is working fine. The problem is, I have multiple objects in my status$-Oberservable which I want to map to one habitId of one habit$-Oberservable. How to do this?

BizzyBob · Accepted Answer · 2021-04-10 11:33:51Z

1

Instead of using find, which returns a single item from an array. You can use filter to return an array of all items that meet the specified condition:

  map(([habits, statuses]) =>
    habits.map(habit => ({
      ...habit,
      statuses: statuses.filter(s => s.habitId === habit.habitId)
    })))

answered Apr 10, 2021 at 11:33

BizzyBob

14.9k4 gold badges31 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ran Turner · Accepted Answer · 2021-04-10 11:49:10Z

1

You're almost there. just use filter instead of find. filter runs till the end of the array, and invokes its callback on every item; in contrast to find which stops after having found one.

connect(): Observable<any[]> {
this.userId = this.authService.userId;
this.habits$ = this.habitService.fetchAllById(this.userId);
this.status$ = this.statusService.fetchAll();
this.joined$ = forkJoin([this.habits$, this.status$]).pipe(
  map(([habits, statuses]) =>
    habits.map(habit => ({
      ...habit,
      status: statuses.filter(s => s.habitId === habit.habitId)
    })))
);
console.log(this.joined$);

return this.joined$;

answered Apr 10, 2021 at 11:49

Ran Turner

18.7k9 gold badges60 silver badges60 bronze badges

Collectives™ on Stack Overflow

How to map to multiple objects within one Observable array?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related