I'm having trouble displaying data from 2 interconnected json in Angular.

here first json :

member = [
   { id: 1, name: 'shinta'},{ id: 2, name: 'rahma'},{ id: 3, name: 'john'}
]

this second json :

nest = [
{id: 1, amount: 2000, userid: 1},{id: 2, amount: 3000, userid: 2},{id: 3, amount: 5000, userid: 2},
{id: 4, amount: 1500, userid: 1},{id: 5, amount: 2200, userid: 1},{id: 6, amount: 12500, userid: 1},
{id: 7, amount: 7000, userid: 2}, {id: 8, amount: 8300, userid: 3},{id: 9, amount: 2800, userid: 3},
{id: 10, amount: 9500, userid: 3}
]

how to view/bind data in html

<ul *ngFor="let item of memberData, let i = index">
<li>{{ item.name }} <span>*this to view sum of user amount*</span></li>
</ul>

please guide to solve this problem. thank you

CodePudding user response：

1. Use .map() to create new array with:

• Duplicate object element of members (via ...x)
• New field: totalAmount with .reduce() to perform aggregate sum.

this.memberData = this.member.map((x) => ({
  ...x,
  totalAmount: this.nest
    .filter((y) => y.userid == x.id)
    .reduce((total: number, current) => (total  = current.amount), 0),
}));

<ul *ngFor="let item of memberData; let i = index">
  <li>
    {{ item.name }} <span>{{ item.totalAmount }}</span>
  </li>
</ul>

Demo on StackBlitz