如何使用 AngularJs 对对象数组中的属性值求和

Posted

技术标签:

【中文标题】如何使用 AngularJs 对对象数组中的属性值求和【英文标题】:How to sum value of a property in an array of objects with AngularJs 【发布时间】:2021-03-18 15:13:49 【问题描述】:

所以我从 nodejs api 到我的 angular 应用程序中获得了一系列 结果,它看起来像这样

[ “会议”:“2019/2020”, “哈马坦”:[ "course_code": "CSC104", "title": "面向对象编程", “单元2, “状态”:“C”, “结果”: "updatedAt": "2020-12-04T11:11:54.557Z", "_id": "5fca1a8daac49e44a40a80e6", "matric_no": "U19CYS1076", “ca”:3, “考试”:48, “总数”:51, “点”:3, “等级”:“C” , "course_code": "CSC105", "title": "问题解决", “单位”:3, “状态”:“R”, “结果”: "updatedAt": "2020-12-04T11:11:54.557Z", "_id": "5fca1aaaaac49e44a40a8105", "matric_no": "U19CYS1076", “ca”:3, “考试”:48, “总数”:51, “点”:3, “等级”:“C” ], “雨”: [ "course_code": "CSC101", "title": "建模与仿真", “单位”:3, “状态”:“C”, “结果”: "updatedAt": "2020-12-04T11:25:38.901Z", "_id": "5fca1cd729eca3320c6245cc", "matric_no": "U19CYS1076", “ca”:3, “考试”:48, “总数”:51, “点”:3, “等级”:“C” , "course_code": "CSC102", "title": "计算机科学导论", “单元2, “状态”:“C”, “结果”: "updatedAt": "2020-12-04T11:25:38.901Z", "_id": "5fca1d2829eca3320c6245eb", "matric_no": "U19CYS1076", “ca”:3, “考试”:48, “总数”:51, “点”:3, “等级”:“C” , "course_code": "CSC103", "title": "数据结构", “单元2, “状态”:“E”, “结果”: "updatedAt": "2020-12-04T11:25:38.901Z", "_id": "5fca1d5429eca3320c62460a", "matric_no": "U19CYS1076", “ca”:3, “考试”:48, “总数”:51, “点”:3, “等级”:“C” ] , “会议”:“2020/2021”, “哈马坦”:[ "course_code": "CSC104", "title": "面向对象编程", “单元2, “状态”:“C”, “结果”: "updatedAt": "2020-12-04T11:11:54.557Z", "_id": "5fca1a8daac49e44a40a80e6", "matric_no": "U19CYS1076", “ca”:3, “考试”:48, “总数”:51, “点”:3, “等级”:“C” , "course_code": "CSC105", "title": "问题解决", “单位”:3, “状态”:“R”, “结果”: "updatedAt": "2020-12-04T11:11:54.557Z", "_id": "5fca1aaaaac49e44a40a8105", "matric_no": "U19CYS1076", “ca”:3, “考试”:48, “总数”:51, “点”:3, “等级”:“C” ], “雨”: [ "course_code": "CSC101", "title": "建模与仿真", “单位”:3, “状态”:“C”, “结果”: "updatedAt": "2020-12-04T11:25:38.901Z", "_id": "5fca1cd729eca3320c6245cc", "matric_no": "U19CYS1076", “ca”:3, “考试”:48, “总数”:51, “点”:3, “等级”:“C” , "course_code": "CSC102", "title": "计算机科学导论", “单元2, “状态”:“C”, “结果”: "updatedAt": "2020-12-04T11:25:38.901Z", "_id": "5fca1d2829eca3320c6245eb", "matric_no": "U19CYS1076", “ca”:3, “考试”:48, “总数”:51, “点”:3, “等级”:“C” , "course_code": "CSC103", "title": "数据结构", “单元2, “状态”:“E”, “结果”: "updatedAt": "2020-12-04T11:25:38.901Z", "_id": "5fca1d5429eca3320c62460a", "matric_no": "U19CYS1076", “ca”:3, “考试”:48, “总数”:51, “点”:3, “等级”:“C” ] ]

现在,我打算在前端实现的是:

    显示每个可用课程的结果,首先是 Harmattan 学期,然后是 Rain Semester。 我想将每个学期的每门课程的所有单元 (TNU) 汇总在一起。 我想在一个会话中将每个学期的每门课程的分数加在一起 ​​(TCP) 然后我想将第 3 名(总分)除以第 2 名(总学分)得到 GPA。 现在将保留第 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>

现在让我向您展示我正在谈论的内容的图形表示 graphical output

按键

TNU:单位总数 TCP:总积分 GPA:平均绩点 CTNU:累计总单位数 CTCP:累计总学分 CGPA:累积平均绩点

下面是我的打字稿文件,如果需要的话。

ngOnInit() this.resultService.getResults() .subscribe(responseData => this.results = responseData.results; 控制台.log(this.results); this.userData = responseData.userData; );

我将参加 cmets 部分。

谢谢。

【问题讨论】:

您是否尝试过使用 map 和 reduce 对感兴趣的值求和? 是的,它没有用。我想我没有以正确的方式使用它。 展示您尝试过的内容并解释未按预期工作的内容可能会有所帮助。 (实际上,您可能不使用 map,这取决于您收集信息的方式。)您可以使用 reduce 对列表求和吗?例如[1,2,3].reduce((sum, v) =&gt; sum + v, 0) 【参考方案1】:

可能不是最好的解决方案,但试试这个:

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

【讨论】:

以上是关于如何使用 AngularJs 对对象数组中的属性值求和的主要内容,如果未能解决你的问题,请参考以下文章

如何使用angularjs动态显示表中的对象数组?

使用AngularJS方式在对象数组中通过其属性查找对象

如何深入观察angularjs中的数组?

如何遍历一个JS对象中的所有属性

AngularJS ng Repeat - 使用复选框按单个对象属性筛选列表

如何限制angularjs ng-repeat中的对象?