2

How to add the amount if they have same category in angular and remove the duplicate entry.

For example:

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

Desired Output:

self.newLineDetails = [{id:'0',category:'AAA',amount:'800'},
                    {id:'1',category:'BBB',amount:'200'}]
georgeawg
  • 48,608
  • 13
  • 72
  • 95
Len
  • 534
  • 1
  • 15
  • 31
  • You want to group the data, for that you can use the third party libraries, refer https://stackoverflow.com/questions/35405937/query-javascript-object-group-by – PM. Aug 10 '18 at 04:42
  • @PM. I don't want to use a third party library. I was hoping the angularjs would be enough. – Len Aug 10 '18 at 04:46
  • You don't need AngularJS specifically to solve this problem. It can be done using plain JS. – 31piy Aug 10 '18 at 04:54

2 Answers2

1

You can use the angularjs filter groupBy

DEMO

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>
Sajeetharan
  • 216,225
  • 63
  • 350
  • 396
1

You can try creating a map sort of json in angular js as : 

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;

});

Now you can iterate upon this map to fetch the new list: 

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

Let me know if you get any issues

codeLover
  • 2,571
  • 1
  • 11
  • 27
  • self.newLineDetails is coming up blank. – Len Aug 10 '18 at 07:03
  • Can you please check what is getting populated in self.lineDetailsMap – codeLover Aug 10 '18 at 07:13
  • it generates an array but the amount is wrong. – Len Aug 10 '18 at 07:41
  • I tried using lineDetailsMap instead but the amount is still wrong. – Len Aug 10 '18 at 08:36
  • Can you show what is getting stored in map – codeLover Aug 10 '18 at 08:46
  • lineDetails before adding your solution: 0:{Id:310,CategoryId:"G66",Amount:1124} 1:{Id:311,CategoryId:"G66",Amount:4551} 2:{Id:312,CategoryId:"D52",Amount:56} lineDetails after adding your solution: 0:{Id:310,CategoryId:"G66",Amount:14777} 1:{Id:311,CategoryId:"G66",Amount:4551} 2:{Id:312,CategoryId:"D52",Amount:56} lineDetailsMap: D52:{Id:312,CategoryId:"D52",Amount:56} G66:{Id:310,CategoryId:"G66",Amount:14777} – Len Aug 10 '18 at 08:58
  • Have edited the code..can you try this one and let me know... – codeLover Aug 10 '18 at 12:42
  • thanks for the effort but it's still blank. I already got an answer. thanks again. – Len Aug 15 '18 at 00:31
  • 1
    So, sorry that couldn't help on time but glad to know you got other solution, however, I have corrected the solution again...it can help other users in future :) – codeLover Aug 16 '18 at 05:09