如何计算和显示来自 javascript object 的字段总和

Question

我有一个 object，我需要在其中显示名称。 以及相关人员的总费用金额。

我可以使用ngfor显示名称。

但是如何显示各个金额的总和。 就像 John 应该显示 50 而 steve 应该显示 170。

谁能帮助我如何做到这一点。

data = [
  {
    'id'  : 1,
    'name': john,
    'expenselist' = [
      {
        'expenseid': 1,
        'amount'   : 20
      },
      {
        'expenseid': 2,
        'amount'   : 30
      },
    ]
  },
  {
    'id'  : 2,
    'name': steve,
    'expenselist' = [
      {
        'expenseid': 1,
        'amount'   : 80
      },
      {
        'expenseid': 2,
        'amount'   : 90
      },
    ]
  }
]

<ion-label *ngFor="let data of data;">
    {{data.name}}: 
    Total Expense Amount:
</ion-label>

Answer 1

我不知道如何使用 ngfor。 但这就是我在普通 JavaScript 中的做法，我希望它能给出一个想法。

data.forEach(person => {
 console.log(person.name)
 expense_amount = 0
 person.expenselist.forEach(expense => {
  expense_amout = expense_amount + expense.mount
  });
 console.log(expense_amount);
});

Answer 2

尝试制作 function 以获得总费用金额，它将起作用。

在 HTML 中，

  <div *ngFor="let person of data;">
      {{person.name}} : Total Expense Amount : {{getTotalExpenseAmount(person)}}
  </div>

在 ts 文件中，添加这个 function，

getTotalExpenseAmount(data) {
    return data.expenselist.reduce(
      (total, current) => total + current.amount,
      0
    );
  }

Answer 3

使用减少

const mutatedData = data.reduce((acc, value)=>{
    acc.push({
        name: value.name,
        amount: value.expenselist.reduce((acc, value)=>acc+value.amount, 0)
    })
}, [])

在 angular 代码中使用 mutatedData 产生结果

<ion-label *ngFor="let data of mutatedData;">
  {{data.name}}  : 
  Total Expense Amount : {{data.amount}}
</ion-label>