合并 JSON 个数据总数

Question

我这里有一个 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>

我发现 and 之类的问题讨论了如何使用 hasOwnProperty 等属性以及 map 和 reduce 函数，但我不确定如何使用它们来合并具有相同名称的不同值对的总数以及如何合计这些。

编辑：

我结合了一些贡献者来使它更清楚（对我来说）。如果这不是最好的方法，欢迎提出意见。我也摆脱了 "this" 运算符。新 StackBlitz here。 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;
}

Answer 1

您可以通过用户名将用户添加到地图：

const map = {};
for (let user of this.items.Users.InteractiveLogon)
  if (!map[user.UserName]) {
     map[user.UserName] = user;
  } else {
     map[user.UserName].Success += user.Success;
     map[user.UserName].Failed += user.Failed;
  }
}
for (let user of this.items.Users.NetworkLogon)
  if (!map[user.UserName]) {
     map[user.UserName] = user;
  } else {
     map[user.UserName].Success += user.Success;
     map[user.UserName].Failed += user.Failed;
  }
}

然后将您的项目添加回列表

for (let key in map) {
  if (map.hasOwnProperty(key)) {
     this.users.push(map[key]);
  }
}

Answer 2

您可以查看用户是否在用户数组中，如果不在，则推送它，否则将值添加到现有值。由于您的值是字符串，因此必须使用 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

Answer 3

Javascript 中的酷孩子们是如何做事的：

所以 redue 是一种非常有用的方式来处理数组而不使用 forloops。我知道您不知道 reduce 是如何工作的，但请查看以下链接：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce https://www.w3schools.com/jsref/jsref_reduce.asp

 this.users= [...this.items.Users.NetworkLogon,...this.items.Users.InteractiveLogon];

https://stackblitz.com/edit/angular-jspxb9

现在，添加重复项：

 let result = [];
 this.users.map((a)=> {
    if (!this[a.UserName]) {
        this[a.UserName] = { UserName: a.UserName, Success: 0, Failed: 0 };
        result.push(this[a.UserName]);
    }
    this[a.UserName].Success += Number(a.Success);
    this[a.UserName].Failed += Number(a.Failed);
}, Object.create(null));
this.users = result;

合并 JSON 个数据总数

Combine JSON data totals

typescript

angular

angular5