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

Question

I have an object, where I need to display name. and the total expense amount of respective person.

I am able to display name by using ngfor .

But how to display the sum of respective amount. Like for John it should display 50 and for steve it should display 170.

Can anyone please help me how to do this.

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

I don't know how to use ngfor. but this is how I would do it in normal JavaScript, I hope it will give an idea.

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

Try to make a function to get Total expense amount and it will work.

In HTML,

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

In ts file, add this function,

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

Answer 3

use reduce

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

the use mutatedData inside your angular code to produce result

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