How to do Sum for total price inside Array in typescript and call it in angular 7

Question

I know that there is a lot of question about this but it really hard to find an answer that I can implement it. I want to make a function for sum a price but everytime I try to use loop it always give me length property undefined

some of topic that I try, but it still failed :

sum-of-object-properties-within-an-array

how-to-get-nested-array-length-in-javascript

how-to-get-sum-from-array-using-javascript

cannot-read-property-length-of-undefined-angular-7

this is my ts:

  allUnpaidTeam: []; //this is a variabel to store all my Json in my array

  formatPrice(value) {
    let val = (value/1)
    return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")
  }

  totalPrice() {
    let total = 0;
    for(let data of this.allUnpaidTeam){
      for(let datas of data.contest){
        let sum = datas.pricePerStudent * data.memberPerTeam;
        total+= sum;
      }
    }
    return this.formatPrice(total);
  }

this is the example of the array json:

{
  "teams": [
    {
      "student": [
        {
          "team": null,
          "_id": "5d4e891cff5e00c9d5c28af9",
          "name": "John Swasneger",
          "email": "john.s@gmail.com",
          "phone": "098778900987",
          "school": "5d4e3e258311a9c3d43569d5",
          "__v": 0
        }
      ],
      "isPaid": false,
      "_id": "5d4e8aadff5e00c9d5c28afd",
      "name": "Team Garda Frosh",
      "contest": {
        "registrationStatus": "open",
        "_id": "5d4d8b19966460a59986e13c",
        "name": "Pizza Hunt",
        "memberPerTeam": 1,
        "maxTeam": 300,
        "pricePerStudent": 185000,
        "__v": 0
      },
      "school": "5d4e3e258311a9c3d43569d5",
      "__v": 0
    },
    {
      "student": [
        {
          "team": "5d4ebcd3af8eacd1a2317bfa",
          "_id": "5d4ebc19af8eacd1a2317bf7",
          "name": "lala",
          "email": "lala@gmail.com",
          "phone": "098778900987",
          "school": "5d4e3e258311a9c3d43569d5",
          "__v": 0
        },
        {
          "team": "5d4ebcd3af8eacd1a2317bfa",
          "_id": "5d4ebc35af8eacd1a2317bf8",
          "name": "lulu",
          "email": "lulu@gmail.com",
          "phone": "098778900987",
          "school": "5d4e3e258311a9c3d43569d5",
          "__v": 0
        }
      ],
      "isPaid": false,
      "_id": "5d4ebcd3af8eacd1a2317bfa",
      "name": "Team Landing Safe",
      "contest": {
        "registrationStatus": "open",
        "_id": "5d4d8b1a966460a59986e13d",
        "name": "burger knight",
        "memberPerTeam": 2,
        "maxTeam": 151,
        "pricePerStudent": 185000,
        "__v": 0
      },
      "school": "5d4e3e258311a9c3d43569d5",
      "__v": 0
    }
  ]
}

this is my html:

              <mat-grid-list class="section-title" cols="4" rowHeight="40px">
                <mat-grid-tile><div class="table-text name last">Total</div></mat-grid-tile>
                <mat-grid-tile><div class="table-text-title">&nbsp;</div></mat-grid-tile>
                <mat-grid-tile><div class="table-text-title">&nbsp;</div></mat-grid-tile>
                <mat-grid-tile><div class="table-text price last">$ {{totalPrice()}}</div></mat-grid-tile>
              </mat-grid-list>

Can someone help me to solve this?

Answer 1

It looks like you're trying to loop over the contest Object, instead of just using its data, like so:

totalPrice() {
    let total = 0;
    for(let data of this.allUnpaidTeam){
      total += data.contest.pricePerStudent * data.contest.memberPerTeam;
    }
    return this.formatPrice(total);
  }

Answer 2

You can use reduce, a function is evaulated for each value, and should return a new subototal each execution.

in your case will be like that: (sorry for formatting, i'm on a mobile in this moment)

totalPrice() =>
 this.allUnpaidTeam.reduce((subtotal, item) => subtotal + item.contest.pricePerStudent * item.contest.memberPerTeam,0)