Using forkJoin with async pipe

[Andrew Howard]

Andrew Howard Asks: Using forkJoin with async pipe
I have 2 arrays (of objects) and I wish to combine them by id.

Array One:

arrayOne$ = of([{id: 1, name: "Andrew"}, {id: 2, name: "Simon"}]) as Observable<any[]>;

Array Two:

arrayTwo$ = of([{id: 1, age: 22}, {id: 2, age: 56}]) as Observable<any[]>;

So the desired end result will be:

[{id: 1, name: "Andrew", age: 22}, {id: 2, name: "Simon", age: 56}]

I have to get these results via 2 different apis so using the async pipe and forkJoin are required. However I'm now stuck on how to use forkJoin, do I need to use map to do this?

Stackblitz = Angular Ivy (forked) - StackBlitz

So far I have:

TS

combinedResults$ = forkJoin([
    this.arrayOne$,
    this.arrayTwo$
  ])

HTML

<div *ngIf="(combinedResults$ | async)?.length !== 0">
<p>Here is the combined list items:</p>
  <ul>
    <li *ngFor="let item of combinedResults$ | async">
      ID: {{item.id}}<br />
      Name: {{item.name}}<br />
      Age: {{item.age}}
    </li>
  </ul>
</div>

SolveForum.com may not be responsible for the answers or solutions given to any question asked by the users. All Answers or responses are user generated answers and we do not have proof of its validity or correctness. Please vote for the answer that helped you in order to help others find out which is the most helpful answer. Questions labeled as solved may be solved or may not be solved depending on the type of question and the date posted for some posts may be scheduled to be deleted periodically. Do not hesitate to share your thoughts here to help others.