AngularJS数组 - 如果相同类别如何添加数量[重复]答案

【问题标题】：AngularJS Array - How to add amount if same category [duplicate]AngularJS数组 - 如果相同类别如何添加数量[重复]
【发布时间】：2019-01-17 15:05:48
【问题描述】：

如果它们的角度类别相同，如何添加数量并删除重复条目。

例如：

self.lineDetails = [{id:'0',category:'AAA',amount:'500'},
                    {id:'1',category:'BBB',amount:'200'},
                    {id:'2',category:'AAA',amount:'300'}]

期望的输出：

self.newLineDetails = [{id:'0',category:'AAA',amount:'800'},
                    {id:'1',category:'BBB',amount:'200'}]

【问题讨论】：

你想对数据进行分组，可以使用第三方库，参考stackoverflow.com/questions/35405937/…
@PM。我不想使用第三方库。我希望 angularjs 就足够了。
你不需要专门的 AngularJS 来解决这个问题。可以使用纯 JS 来完成。

标签： javascript arrays angularjs

【解决方案1】：

您可以使用 angularjs 过滤器 groupBy

演示

var myApp = angular.module('myApp', ['angular.filter']);

myApp.controller('MyController', function($scope) {
	$scope.data = [{id:'0',category:'AAA',amount:'500'},
                    {id:'1',category:'BBB',amount:'200'},
                    {id:'2',category:'AAA',amount:'300'}];

	$scope.getAmountSum = function(items) {
  	return items
    .map(function(x) { return x.amount; })
    .reduce(function(a, b) { return parseInt(a) + parseInt(b); });
  };

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.js"></script>
<div ng-app="myApp" ng-controller="MyController">
  <ul>
    <li ng-repeat="(key, items) in data | groupBy: 'category'">
      category: {{items[0].category}}, amount: {{getAmountSum(items)}}
    </li>
  </ul>
</div>

【讨论】：

我收到以下错误：TypeError: items.map is not a function at Object.self.getAmountSum
看上面的demo

【解决方案2】：

您可以尝试在 Angular js 中创建一个地图排序的 json 为：

self.lineDetails = [{id:'0',category:'AAA',amount:'500'},
                    {id:'1',category:'BBB',amount:'200'},
                    {id:'2',category:'AAA',amount:'300'}];
self.lineDetailsMap = {};
angular.forEach(self.lineDetails, function(lineDetail)    {
     if(self.lineDetailsMap[lineDetail.category] !== undefined)    {
          var lineDetailOld = self.lineDetailsMap[lineDetail.category] ;
          lineDetail.amount = parseInt(lineDetailOld.amount) + parseInt(lineDetail.amount);
     }
     self.lineDetailsMap[lineDetail.category] = lineDetail;

});

现在您可以迭代此地图以获取新列表：

self.newLineDetails = [];
angular.forEach(self.lineDetailsMap,function(value,key)     {
    self.newLineDetails.push(value);
});

如果您有任何问题，请告诉我

【讨论】：

self.newLineDetails 出现空白。
你能检查一下 self.lineDetailsMap 中填充了什么
生成数组但是数量不对。
我尝试使用lineDetailsMap，但数量仍然错误。
所以，很抱歉没能及时提供帮助，但很高兴知道您有其他解决方案，但是，我已经再次更正了解决方案......它可以在未来帮助其他用户:)