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": "[email protected]",
          "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": "[email protected]",
          "phone": "098778900987",
          "school": "5d4e3e258311a9c3d43569d5",
          "__v": 0
        },
        {
          "team": "5d4ebcd3af8eacd1a2317bfa",
          "_id": "5d4ebc35af8eacd1a2317bf8",
          "name": "lulu",
          "email": "[email protected]",
          "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?

your requirement is to get pricePerStudent * memberPerTeam of each contest object and add this value to sum. — Akhil Aravind
– Akhil Aravind, Commented Aug 10, 2019 at 15:58
getAllUnpaidTeam reads like the name of a method. If that's the case, then it needs to be invoked. If it's actually a property that evaluates to an array then you should rename it so it's not confusing — Aluan Haddad
– Aluan Haddad, Commented Aug 10, 2019 at 15:59
yes, I want to get the total value of total price and to show it in my html — Rakis Friski
– Rakis Friski, Commented Aug 10, 2019 at 15:59
@AluanHaddad getAllUnpaidTeam is an array to add the data getAllUnpaidGuru: [];, I'll add it in my post — Rakis Friski
– Rakis Friski, Commented Aug 10, 2019 at 16:01
@RakisFriski OK. Well, it probably isn't initialized when the component is initially rendered. you want something like <mat-grid-list *ngIf="getAllUnpaidGuru">. However, you should rename it to something like allUnpaidGuru so it's not confusing. — Aluan Haddad
– Aluan Haddad, Commented Aug 10, 2019 at 16:05

Sagar V · Accepted Answer · 2019-08-10 17:02:41Z

5

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)

edited Aug 10, 2019 at 17:02

Sagar V

12.5k8 gold badges46 silver badges71 bronze badges

answered Aug 10, 2019 at 16:57

Claudio

3,10512 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Rakis Friski Over a year ago

Thankyou for your answer, it works for me too but It give me another error that said reduced is undefined

Claudio Over a year ago

what is the type of this.allUnpaidTeam ? is an array or an object?

Rakis Friski Over a year ago

it is an array but one of the attribut contest is an object

Claudio Over a year ago

should not be a problem. I’ve notice that your sample data wraps the array to an object key named teams that seems forgotten in the code. Am I missing something?

Will Alexander · Accepted Answer · 2019-08-10 16:39:47Z

2

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);
  }

answered Aug 10, 2019 at 16:39

Will Alexander

3,5811 gold badge12 silver badges18 bronze badges

4 Comments

Rakis Friski Over a year ago

it's work but I still got error that said ERROR TypeError: Cannot read property 'length' of undefined and I think it point toward contest since it got red underlined

Rakis Friski Over a year ago

I try to follow this but it seems different since my contest in the middle of data.contest I tried using contest = [] as this thread pointed but it seems not work stackoverflow.com/questions/44689474/…

Will Alexander Over a year ago

What does allUnpaidTeam contain when you call totalPrice on it?

Rakis Friski Over a year ago

it contain exactly as an array of JSON that I state above in the post

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related