如何仅使用相同的用户名显示本地存储中的值总和？

Question

我在下面有本地存储值：

[ {"id":1, "amount":24000000, "users":{"username":"user1"}}, {"id":2, "amount":10000000, "users":{"username":"user1"}}, {"id":3, "amount":20000000, "users":{"username":"user2"}} ]

我使用 AngularJS 在 JSP 中显示我的本地存储。

如何仅对具有相同用户名的本地存储中的金额求和？

我的控制器：

$scope.listOfCart = CartService.getAllCarts()||[];
$scope.items = $scope.listOfCart

我的JSP:

<tr data-ng-repeat="cart in items">
    <td>{{cart.users.username}}</td>
    <td>{{cart.amount}}</td>
</tr>

那么如何只显示相同用户名的总和值金额？我尝试使用 forEach 但显示所有数量的用户名。我只想显示相同用户名的金额总和。

Answer 1

您可以使用 Array#reduce 来汇总属于特定用户的项目：

let data = [{
  "id": 1,
  "amount": 24000000,
  "users": {
    "username": "user1"
  }
}, {
  "id": 2,
  "amount": 10000000,
  "users": {
    "username": "user1"
  }
}, {
  "id": 3,
  "amount": 20000000,
  "users": {
    "username": "user2"
  }
}];

function sumFor(username) {
  return data.reduce((sum, item) => {
    if (item.users.username === username) {
      sum += item.amount;
    }
    return sum;
  }, 0);
}

console.log(sumFor('user1'));

现在，您可以将函数 sumFor 定义为 $scope 的成员并从模板中调用它。

Answer 2

这可能对您有所帮助。我使用嵌套 angular#forEach 并在对具有相同用户名的金额求和后，将其从数组中删除。

var app = angular.module("myApp",[]);

app.controller('MainCtrl', function($scope) {
 $scope.data = [{
  "id": 1,
  "amount": 24000000,
  "users": {
    "username": "user1"
  }
}, {
  "id": 2,
  "amount": 10000000,
  "users": {
    "username": "user1"
  }
}, {
  "id": 3,
  "amount": 20000000,
  "users": {
    "username": "user2"
  }
}];

$scope.totalAmount = 0; 
angular.forEach($scope.data,function(item,index){
  var temp = $scope.data[index];
  $scope.totalAmount =temp.amount;
  var tempIndex = index;
  angular.forEach($scope.data,function(item,index){
    if (index == tempIndex){ 
     return;
   }else{
     if (temp.users.username == item.users.username){ 
       $scope.totalAmount += item.amount; 
       $scope.data.splice(index, 1); //removing after summing
     }
   }
  });
  temp.amount = $scope.totalAmount;
  $scope.totalAmount = 0;
 });
 
});

<script data-require="angularjs@1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="MainCtrl">
  <table>
   <tr data-ng-repeat="cart in data track by $index">
    <td>{{cart.users.username}}</td>
    <td>{{cart.amount}}</td>
   </tr>
  </table>
</body>

如何仅使用相同的用户名显示本地存储中的值总和？

How to display sum of values in local-storage with same username only?

angularjs

jsp

angular-local-storage