How to sum value of a property in an array of objects with AngularJs

Issue

So I am getting an array of results from a nodejs api to my angular app and it looks like this

    [
      {
        "session": "2019/2020",
        "harmattan": [
          {
            "course_code": "CSC104",
            "title": "Object Oriented Programming",
            "unit": 2,
            "status": "C",
            "result": {
              "updatedAt": "2020-12-04T11:11:54.557Z",
              "_id": "5fca1a8daac49e44a40a80e6",
              "matric_no": "U19CYS1076",
              "ca": 3,
              "exam": 48,
              "total": 51,
              "point": 3,
              "grade": "C"
            }
          },
          {
            "course_code": "CSC105",
            "title": "Problem Solving",
            "unit": 3,
            "status": "R",
            "result": {
              "updatedAt": "2020-12-04T11:11:54.557Z",
              "_id": "5fca1aaaaac49e44a40a8105",
              "matric_no": "U19CYS1076",
              "ca": 3,
              "exam": 48,
              "total": 51,
              "point": 3,
              "grade": "C"
            }
          }
        ],
        "rain": [
          {
            "course_code": "CSC101",
            "title": "Modelling and Simulation",
            "unit": 3,
            "status": "C",
            "result": {
              "updatedAt": "2020-12-04T11:25:38.901Z",
              "_id": "5fca1cd729eca3320c6245cc",
              "matric_no": "U19CYS1076",
              "ca": 3,
              "exam": 48,
              "total": 51,
              "point": 3,
              "grade": "C"
            }
          },
          {
            "course_code": "CSC102",
            "title": "Introduction to Computer Science",
            "unit": 2,
            "status": "C",
            "result": {
              "updatedAt": "2020-12-04T11:25:38.901Z",
              "_id": "5fca1d2829eca3320c6245eb",
              "matric_no": "U19CYS1076",
              "ca": 3,
              "exam": 48,
              "total": 51,
              "point": 3,
              "grade": "C"
            }
          },
          {
            "course_code": "CSC103",
            "title": "Data Structures",
            "unit": 2,
            "status": "E",
            "result": {
              "updatedAt": "2020-12-04T11:25:38.901Z",
              "_id": "5fca1d5429eca3320c62460a",
              "matric_no": "U19CYS1076",
              "ca": 3,
              "exam": 48,
              "total": 51,
              "point": 3,
              "grade": "C"
            }
          }
        ]
      },
      {
        "session": "2020/2021",
        "harmattan": [
          {
            "course_code": "CSC104",
            "title": "Object Oriented Programming",
            "unit": 2,
            "status": "C",
            "result": {
              "updatedAt": "2020-12-04T11:11:54.557Z",
              "_id": "5fca1a8daac49e44a40a80e6",
              "matric_no": "U19CYS1076",
              "ca": 3,
              "exam": 48,
              "total": 51,
              "point": 3,
              "grade": "C"
            }
          },
          {
            "course_code": "CSC105",
            "title": "Problem Solving",
            "unit": 3,
            "status": "R",
            "result": {
              "updatedAt": "2020-12-04T11:11:54.557Z",
              "_id": "5fca1aaaaac49e44a40a8105",
              "matric_no": "U19CYS1076",
              "ca": 3,
              "exam": 48,
              "total": 51,
              "point": 3,
              "grade": "C"
            }
          }
        ],
        "rain": [
          {
            "course_code": "CSC101",
            "title": "Modelling and Simulation",
            "unit": 3,
            "status": "C",
            "result": {
              "updatedAt": "2020-12-04T11:25:38.901Z",
              "_id": "5fca1cd729eca3320c6245cc",
              "matric_no": "U19CYS1076",
              "ca": 3,
              "exam": 48,
              "total": 51,
              "point": 3,
              "grade": "C"
            }
          },
          {
            "course_code": "CSC102",
            "title": "Introduction to Computer Science",
            "unit": 2,
            "status": "C",
            "result": {
              "updatedAt": "2020-12-04T11:25:38.901Z",
              "_id": "5fca1d2829eca3320c6245eb",
              "matric_no": "U19CYS1076",
              "ca": 3,
              "exam": 48,
              "total": 51,
              "point": 3,
              "grade": "C"
            }
          },
          {
            "course_code": "CSC103",
            "title": "Data Structures",
            "unit": 2,
            "status": "E",
            "result": {
              "updatedAt": "2020-12-04T11:25:38.901Z",
              "_id": "5fca1d5429eca3320c62460a",
              "matric_no": "U19CYS1076",
              "ca": 3,
              "exam": 48,
              "total": 51,
              "point": 3,
              "grade": "C"
            }
          }
        ]
      }
    ]

Now, what i intend to achieve on my frontend is this:

1. Display the Results for every available sessions, Harmattan Semester comes first, followed by Rain Semester.
2. I want to sum all the unit of each courses together (TNU) for each semester in session.
3. I want to sum the points of each courses together (TCP) for each semester in a session
4. Then I want the result of No. 3 (total points) to be divided by No. 2 (total units) to give me GPA.
5. The Result of No. 3 and No. 4 will now be kept and added to other semester results accordingly to give the cummulative value i.e CTNU, CTCP, CGPA. That is, total units for Harmattan semester 2019/2020 will be added to Rain semester 2019/2020 and other sessions accordingly. Same with the grade points.

Let me show you how my frontend code looks for now

<div *ngFor="let result of results">
<div *ngIf="result.harmattan.length > 0">
          <table class="table table-striped">
            
            <thead>
              <tr>
                <th colspan="2">PROGRAM: {{userData?.department | uppercase}}</th>
                <th>ACADEMIC YEAR: {{result.session}}</th>
                <th colspan="2">SEMESTER: HARMATTAN</th>
              </tr>
              <tr class="thead-light">
                <th>COURSE CODE</th>
                <th>COURSE NAME</th>
                <th>UNIT</th>
                <th>GRADE</th>
                <th>CREDIT POINT</th>
              </tr>
            </thead>

            <tr *ngFor="let first of result.harmattan" >
              <td>{{first.course_code}}</td>
              <td>{{first.title}}</td>
              <td>{{first.unit}}</td>
              <td>{{first.result.grade}}</td>
              <td>{{first.result.point * first.unit}}</td>
            </tr>
            <p>Total Units: **value**</p>
            <p>Total Points: **value**</p>
            <p>GPA: **value**</p>
            <p>Cumulative Total Units: **value**</p>
            <p>Cumulative Total Points: **value**</p>
            <pCumulative GPA: **value**</p>
          </table>
        </div>
        <br>
        <div *ngIf="result.rain.length > 0">
          <table class="table table-striped">
            <thead>
              <tr>
                <th colspan="2">PROGRAM: {{userData?.department | uppercase}}</th>
                <th>ACADEMIC YEAR: {{result.session}}</th>
                <th colspan="2">SEMESTER: RAIN</th>
              </tr>
              <tr class="thead-light">
                <th>COURSE CODE</th>
                <th>COURSE NAME</th>
                <th>UNIT</th>
                <th>GRADE</th>
                <th>CREDIT POINT</th>
              </tr>
            </thead>
            <tr *ngFor="let second of result.rain">
              <td>{{second.course_code}}</td>
              <td>{{second.title}}</td>
              <td>{{second.unit}}</td>
              <td>{{second.result.grade}}</td>
              <td>{{second.result.point * second.unit}}</td>
            </tr>
            <p>Total Units: **value**</p>
            <p>Total Points: **value**</p>
            <p>GPA: **value**</p>
            <p>Cumulative Total Units: **value**</p>
            <p>Cumulative Total Points: **value**</p>
            <pCumulative GPA: **value**</p>

          </table>
        </div>
        <br>
      </div>

Now let me show you a graphical representation of what I'm talking about graphical output

Keys

• TNU: Total number of units
• TCP: Total Credit Points
• GPA: Grade Point Average
• CTNU: Cummulative Total Number of units
• CTCP: Cummulative Total Credit Points
• CGPA: Cummulative Grade Point Average

Below of is what i have on my typescript file, if it's needed.

    ngOnInit() {
        this.resultService.getResults()
        .subscribe(responseData => {
          this.results = responseData.results;
          console.log(this.results);
          this.userData = responseData.userData;
        });
      }

I'll be on the comments section.

Thanks.

Solution

Might not be the best solution but try this:

html:

<div *ngFor="let result of resultData; let i = index">
<div *ngIf="result.harmattan.length > 0">
          <table class="table table-striped">
            
            <thead>
              <tr>
                <!-- <th colspan="2">PROGRAM: {{userData?.department | uppercase}}</th> -->
                <th>ACADEMIC YEAR: {{result.session}}</th>
                <th colspan="2">SEMESTER: HARMATTAN</th>
              </tr>
              <tr class="thead-light">
                <th>COURSE CODE</th>
                <th>COURSE NAME</th>
                <th>UNIT</th>
                <th>GRADE</th>
                <th>CREDIT POINT</th>
              </tr>
            </thead>

            <tr *ngFor="let first of result.harmattan" >
              <td>{{first.course_code}}</td>
              <td>{{first.title}}</td>
              <td>{{first.unit}}</td>
              <td>{{first.result.grade}}</td>
              <td>{{first.result.point * first.unit}}</td>
            </tr>
            <p>Total Units: {{ totalUnits(result.harmattan) }}</p>
            <p>Total Points: {{ totalPoints(result.harmattan) }}</p>
            <p>GPA: {{ totalGPA(result.harmattan) }}</p>
            <p>Cumulative Total Units: {{cumulativeUnits(result.harmattan, i, 'harmattan')}}</p>
            <p>Cumulative Total Points: {{cumulativePoints(result.harmattan, i, 'harmattan')}}</p>
            <p> Cumulative GPA: {{cumulativeGPA(result.harmattan, i, 'harmattan')}}</p>
          </table>
        </div>
        <br>
        <br>
        <div *ngIf="result.rain.length > 0">
            <table class="table table-striped">
              <thead>
                <tr>
                  <!-- <th colspan="2">PROGRAM: {{userData?.department | uppercase}}</th> -->
                  <th>ACADEMIC YEAR: {{result.session}}</th>
                  <th colspan="2">SEMESTER: RAIN</th>
                </tr>
                <tr class="thead-light">
                  <th>COURSE CODE</th>
                  <th>COURSE NAME</th>
                  <th>UNIT</th>
                  <th>GRADE</th>
                  <th>CREDIT POINT</th>
                </tr>
              </thead>
              <tr *ngFor="let second of result.rain">
                <td>{{second.course_code}}</td>
                <td>{{second.title}}</td>
                <td>{{second.unit}}</td>
                <td>{{second.result.grade}}</td>
                <td>{{second.result.point * second.unit}}</td>
              </tr>
              <p>Total Units: {{ totalUnits(result.rain) }}</p>
            <p>Total Points: {{ totalPoints(result.rain) }}</p>
            <p>GPA: {{ totalGPA(result.rain) }}</p>
            <p>Cumulative Total Units: {{cumulativeUnits(result.rain, i, 'rain')}}</p>
              <p>Cumulative Total Points: {{cumulativePoints(result.rain, i, 'rain')}}</p>
              <p>Cumulative GPA: {{cumulativeGPA(result.rain, i, 'rain')}}</p>
  
            </table>
          </div>

Ts file :

cumulativeUnits(result, session, semester){
let tnu = 0
var tnuHarmattan = 0;
let thisSemester = 0;
if(session == 0){
  if (semester == 'harmattan'){
    for(let item of this.resultData[0].harmattan){
      tnuHarmattan += item.unit;
    }
    return tnuHarmattan;
  }
  else if (semester == 'rain'){
    for(let item of this.resultData[0].harmattan){
      tnuHarmattan += item.unit;
    }
    for(let item of this.resultData[0].rain){
      tnu += item.unit;
    }
    return tnuHarmattan + tnu;
  }
}
else{
  if (semester == 'harmattan'){
    for(let i:number = 0; i < session; i++){
  
      for(let item of this.resultData[i].harmattan){
        tnuHarmattan += item.unit;
      }
      for(let item of this.resultData[i].rain){
        tnu += item.unit;
      }
      for(let item of result){
        thisSemester += item.unit;
      }
    }
    return tnuHarmattan + tnu + thisSemester;
  }
  else if (semester == 'rain'){
    for(let i:number = 0; i <= session; i++){
  
      for(let item of this.resultData[i].harmattan){
        tnuHarmattan += item.unit;
      }
      for(let item of this.resultData[i].rain){
        tnu += item.unit;
      }
    }
    return tnuHarmattan + tnu;
  }
  
}

}

cumulativePoints(result, session, semester){
let gpSemester = 0;
let guyCPRain = 0;
let guyCPharmattan = 0;
if(session == 0){
  if (semester == 'harmattan'){
    for(let item of this.resultData[0].harmattan){
      guyCPharmattan += (item.result.point * item.unit);
    }
    return guyCPharmattan;
  }
  else if (semester == 'rain'){
    for(let item of this.resultData[0].harmattan){
      guyCPharmattan += (item.result.point * item.unit);
    }
    for(let item of this.resultData[0].rain){
      guyCPRain += (item.result.point * item.unit);
    }
    return guyCPharmattan + guyCPRain;
  }
}
else{
  if (semester == 'harmattan'){
    for(let i:number = 0; i < session; i++){
  
      for(let item of this.resultData[i].harmattan){
        guyCPharmattan += (item.result.point * item.unit);
      }
      for(let item of this.resultData[i].rain){
        guyCPRain += (item.result.point * item.unit);
      }
      for(let item of result){
        gpSemester +=  (item.result.point * item.unit);
      }
    }
    return guyCPharmattan + guyCPRain + gpSemester;
  }
  else if (semester == 'rain'){
    for(let i:number = 0; i <= session; i++){
  
      for(let item of this.resultData[i].harmattan){
        guyCPharmattan += (item.result.point * item.unit);
      }
      for(let item of this.resultData[i].rain){
        guyCPRain += (item.result.point * item.unit);
      }
    }
    return guyCPharmattan + guyCPRain;
  }
  
}

}

cumulativeGPA(result, session, semester){
let tnu = 0
var tnuHarmattan = 0;
let thisSemester = 0;
let guyCPRain = 0;
let guyCPharmattan = 0;
let gpSemester = 0;
if(session == 0){
  if (semester == 'harmattan'){
    for(let item of this.resultData[0].harmattan){
      guyCPharmattan += (item.result.point * item.unit);
      tnuHarmattan += item.unit;
    }
    return guyCPharmattan / tnuHarmattan;
  }
  else if (semester == 'rain'){
    for(let item of this.resultData[0].harmattan){
      guyCPharmattan += (item.result.point * item.unit);
      tnuHarmattan += item.unit;
    }
    for(let item of this.resultData[0].rain){
      guyCPRain += (item.result.point * item.unit);
      tnu += item.unit;
    }
    return ((guyCPharmattan + guyCPRain) / (tnuHarmattan + tnu)).toFixed(2);
  }
}
else{
  if (semester == 'harmattan'){
    for(let i:number = 0; i < session; i++){
  
      for(let item of this.resultData[i].harmattan){
        guyCPharmattan += (item.result.point * item.unit);
        tnuHarmattan += item.unit;
      }
      for(let item of this.resultData[i].rain){
        guyCPRain += (item.result.point * item.unit);
        tnu += item.unit;
      }
      for(let item of result){
        thisSemester += item.unit;
        gpSemester +=  (item.result.point * item.unit);
      }
    }
    return ((guyCPharmattan + guyCPRain + gpSemester) / (tnuHarmattan + tnu + thisSemester)).toFixed(2);;
  }
  else if (semester == 'rain'){
    for(let i:number = 0; i <= session; i++){
  
      for(let item of this.resultData[i].harmattan){
        guyCPharmattan += (item.result.point * item.unit);
        tnuHarmattan += item.unit;
      }
      for(let item of this.resultData[i].rain){
        guyCPRain += (item.result.point * item.unit);
        tnu += item.unit;
      }
    }
    return ((guyCPharmattan + guyCPRain) / (tnuHarmattan + tnu)).toFixed(2);
  }
  
}

}

Answered By - Mubharaq