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

我发现了诸如 Combining JSON Data Sets 和 Sum of object properties within an array 之类的问题，它们谈论使用诸如 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

那么这里的 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;

Answer 2

您可以查看用户是否在 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

Answer 3

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

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