时间戳

首页 > 解决方案 > 合并 JSON 数据总计

angular - 合并 JSON 数据总计

问题描述

我在这里有一个 Stackblitz.com 示例https://stackblitz.com/edit/angular-xhulyo?file=app%2Fapp.component.ts，我需要合并像 dbrown 或 qadmin 这样的用户总数，而不是单独显示它们线。它当前显示如下结果：

User    Success Failure
dbrown  16  0
qadmin  4   0
dbrown  4   1
qadmin  21  2
administrator   42  0
cooper  8   0
ad.brown    7   0

dbrown 的总数应该是 20 和 1，qadmin 的总数应该是 25 和 2。从代码中可以看出，它只是在遍历 users 变量。这是 app.component.ts：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 5';
  users: any[] = [];
  items: any;

  ngOnInit() {
    this.items = {"Users":{"InteractiveLogon":[{"UserName":"dbrown","Success":"16","Failed":"0"},{"UserName":"qadmin","Success":"4","Failed":"0"}],"NetworkLogon":[{"UserName":"dbrown","Success":"4","Failed":"1"},{"UserName":"qadmin","Success":"21","Failed":"2"},{"UserName":"administrator","Success":"42","Failed":"0"},{"UserName":"cooper","Success":"8","Failed":"0"},{"UserName":"ad.brown","Success":"7","Failed":"0"}]}};

    for (let user of this.items.Users.InteractiveLogon)
      this.users.push(user);

    for (let user of this.items.Users.NetworkLogon)
      this.users.push(user);
  }

}

这是 app.component.html：

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>
<hr>
<table *ngIf="users">
  <thead>
    <tr>
      <th align=left>User</th>
      <th>Success</th>
      <th>Failure</th>
    </tr>
  </thead>
    <tr *ngFor="let row of users" >
      <td style="padding-right: 15px">{{row.UserName}}</td>
      <td>{{row.Success}}</td>
      <td>{{row.Failed}}</td>
    </tr>
</table>

我发现了诸如Combining JSON Data Sets和Sum of object properties within an array 之类的问题，这些问题涉及使用诸如 hasOwnProperty 和 map 和 reduce 函数之类的属性，但我不确定如何使用它们将单独的值对的总数与相同的名称以及如何合计这些名称。

编辑：

我和一些贡献者一起去使它更清楚（对我来说）。如果这不是最好的方法，欢迎发表评论。我也摆脱了“this”运算符。新的 StackBlitz在这里。combineUserTotals 函数如下所示：

combineUserTotals() {
  let result: any, results: any[] = [];

  this.users.map((user) => {
    result = results.find(u => u.UserName == user.UserName);

    if (!result)
      results.push({ UserName: user.UserName, Success: Number(user.Success), Failed: Number(user.Failed) });
    else {
      result.Success += Number(user.Success);
      result.Failed += Number(user.Failed);
    }
  });

  return results;
}

标签： angulartypescriptangular5

解决方案

您可以查看用户是否在 users 数组中，如果不是，则推送它，否则将值添加到现有数组中。由于您的值是字符串，因此必须使用 parseIt() 将它们转换为求和。

for (let user of this.items.Users.InteractiveLogon) {
  let _user = this.users.find( u => u.UserName == user.UserName );
  if ( _user ){
    _user.Success = parseInt(_user.Success) + parseInt(user.Success);
    _user.Failed = parseInt(_user.Failed) + parseInt(user.Failed);
  }
  else {
    this.users.push(user);
  }
}
for (let user of this.items.Users.NetworkLogon) {
  let _user = this.users.find( u => u.UserName == user.UserName );
  if ( _user ){
    _user.Success = parseInt(_user.Success) + parseInt(user.Success);
    _user.Failed = parseInt(_user.Failed) + parseInt(user.Failed);
  }
  else {
    this.users.push(user);
  }
}

结果

User    Success Failure
dbrown  20  1
qadmin  25  2
administrator   42  0
cooper  8   0
ad.brown    7   0

推荐阅读