Angular 合并JSON数据总计

我这里有一个Stackblitz.com示例，我需要合并用户总数，比如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

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

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>

---

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

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

---

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

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

---

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

---

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

---

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

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

现在，要添加重复项：

 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;

---

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

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

现在，要添加重复项：

 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;

---

---

我正在努力理解你的问题。你会在html中只有一行代码，还是除了求和（n+（n-1）），你会有所有的用户？不在乎。但是我认为最好在typescript代码中的users变量中组合用户。我试图理解你的问题。你会在html中只有一行代码，还是除了求和（n+（n-1）），你会有所有的用户？不在乎。但是我认为最好在typescript代码中的users变量中组合用户。for循环的第2-5行似乎没有添加到this.users变量中？但这段代码似乎确实有效！我知道它是有效的，因为我先在你的SB中试用了它，然后在这里复制了它。我认为这是太多的代码，必须有一种方法来做它更简单，虽然更难理解。我在看c#中的并行for，但在typescript中似乎没有等效项。谢谢，我喜欢您结合答案解决它的方式。for循环的第2-5行似乎没有添加到this.users变量中？但这段代码似乎确实有效！我知道它是有效的，因为我先在你的SB中试用了它，然后在这里复制了它。我认为这是太多的代码，必须有一种方法来做它更简单，虽然更难理解。我在看c#中的并行for，但在typescript中似乎没有对等的。谢谢，我喜欢你结合答案解决它的方式。这使dbrown的成功总数达到164，qadmin的成功总数达到421，但我认为这是因为它将数字视为字符串。我似乎找不到解决问题的方法，甚至将Number或parseInt应用于Success/Failed属性。@sfors哈哈，糟糕的是我没有注意到它。只要抛出一堆parseInt（），就可以解决问题了^^这会使dbrown的成功总数达到164，qadmin的成功总数达到421，但我认为这是因为它将数字视为字符串。而且我似乎找不到解决问题的方法，甚至对成功/失败的属性应用Number或parseInt。@sfors Haha，唉，糟糕的是，我没有注意到。只要抛出一堆parseInt（）就可以解决问题了^^^这是一种很酷的方法来汇总所有内容，非常类似于我附加的第二个链接，它使用了reduce，但并没有解决我的问题。我不需要合计所有内容-我需要合并具有相同用户名的用户总数..this.users=[…this.items.users.NetworkLogon，…this.items.users.InteractiveLogon]；这令人困惑。我使用this.users=this.items.users.NetworkLogon.concat（this.items.users.InteractiveLogon）；相反，那很好。它被称为扩展运算符。这是时髦的孩子们在ES6+lol中的表现。这可能是基于map使用的最好答案，并且没有循环，我能够让它正确地合计结果。另外，感谢您指导如何更好地使用JS函数和运算符来完成此任务。@sfor没有问题。我们是来帮忙的。如果有机会，请参加我的javascript es6+课程。这是一个很酷的方法来汇总所有内容，非常类似于我附加的第二个链接，它使用了reduce，但它并没有解决我的问题。我不需要合计所有内容-我需要合并具有相同用户名的用户总数..this.users=[…this.items.users.NetworkLogon，…this.items.users.InteractiveLogon]；这令人困惑。我使用this.users=this.items.users.NetworkLogon.concat（this.items.users.InteractiveLogon）；相反，那很好。它被称为扩展运算符。这是时髦的孩子们在ES6+lol中的表现。这可能是基于map使用的最好答案，并且没有循环，我能够让它正确地合计结果。另外，感谢您指导如何更好地使用JS函数和运算符来完成此任务。@sfor没有问题。我们是来帮忙的。如果有机会，请参加我的javascript es6+课程。