堆棧內存溢出
  簡體   English   中英

如何使用 AngularJs 對對象數組中的屬性值求和

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

 原文  2020-12-07 10:03:13  7   1    javascript/ html/ arrays/ angularjs/ typescript

問題描述

因此，我從 nodejs api 到我的 angular 應用程序中獲得了一系列結果，它看起來像這樣


    [
      {
        "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"
            }
          }
        ]
      }
    ]

現在，我打算在前端實現的是：

  1. 顯示每個可用會話的結果，首先是 Harmattan Semester，然后是 Rain Semester。
  2. 我想在 session 中將每個學期的每門課程的所有單元 (TNU) 加在一起。
  3. 我想在 session 中將每個學期的每門課程的分數加在一起（TCP）
  4. 然后我希望將第 3 名（總分）的結果除以第 2 名（總學分），得到 GPA。
  5. 現在將保留第 3 和第 4 的成績，並相應地添加到其他學期成績中，以給出累積值，即 CTNU、CTCP、CGPA。 也就是說，Harmattan 2019/2020 學期的總學分將相應地添加到 Rain 學期 2019/2020 和其他學期。 與學分相同。

讓我向您展示我的前端代碼現在的樣子

<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>

現在讓我向您展示我正在談論的圖形 output的圖形表示

鑰匙

  • TNU：單位總數
  • TCP：總學分
  • GPA：平均績點
  • CTNU：累計單位總數
  • CTCP：累計總學分
  • CGPA：累積平均績點

以下是我在 typescript 文件中的內容，如果需要的話。


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

我會在評論區。

謝謝。

1 個解決方案

解決方案1
 0 已采納  2020-12-09 14:37:18

可能不是最好的解決方案，但試試這個：

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文件：

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

}

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何按 object 的值對對象數組進行分組並將結果求和到新屬性中 如何按屬性值對對象數組進行排序並在該值相等時求和？ 如何在Javascript數組中求和對象的屬性 如何求和對象數組中 javascript 數組的屬性之和？ 如何基於在對象數組中共享另一個屬性名稱的值來對一個屬性名稱的值求和（在 Javascript 中） 如何根據一個等值的性質得到數組中各種對象的正負值之和？ 屬性indise對象數組的總和值按鍵並返回相同的數組但改變總和值 如何從Angular.js中的對象數組獲取值 angularjs通過屬性值組合2個對象 如何合並對象數組中的重復項並對 MongoDB 中的特定屬性求和？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM