How to remove duplicate value while sorting in angularjs?

Question

i have created a table of records in html using angularjs. The problem i'm facing is to take away the duplicate value while sorting. As of now i have taken the duplicate records while page loading . But when i try to sort the records to descending order i'm able to see the duplicate records again.

Here is my html:

<!doctype html>
<html ng-app='myApp'>
 <head>
 <title>ng-include directives in AngularJS</title>
 <link href="style.css" rel='stylesheet' type='text/css'>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js" type='text/javascript'></script>
 <script src='script.js' type='text/javascript'></script>
 <link rel="stylesheet" href="style1.css" />
 </head>
 <body ng-controller="MyCtrl"> 

 <table border='1'>
 <tr >
 <th ng-click='sortColumn("bucket")' ng-class='sortClass("bucket")'>buckets</th>
 <th ng-click='sortColumn("productCode")' ng-class='sortClass("productCode")'>productCode</th>
 <th ng-click='sortColumn("countOfAllocatedAccount")' ng-class='sortClass("countOfAllocatedAccount")'>countOfAllocatedAccount</th>
 <th ng-click='sortColumn("countOfCollectedAccount")' ng-class='sortClass("countOfCollectedAccount")'>countOfCollectedAccount</th>
  <th ng-click='sortColumn("sumOfArrearsOfAllocatedAmount")' ng-class='sortClass("sumOfArrearsOfAllocatedAmount")'>sumOfArrearsOfAllocatedAmount</th>
   <th ng-click='sortColumn("sumOfCollectedAmount")' ng-class='sortClass("sumOfCollectedAmount")'>sumOfCollectedAmount</th>
 </tr>
 <tr ng-repeat='p in products | orderBy:column:reverse'>
 <td><span ng-show="products[$index-1].bucket != p.bucket" ng-model="sorting">{{p.bucket}}</span></td>                                     
<td><span>{{p.productCode}}</span></td>
<td><span>{{p.countOfAllocatedAccount}}</span></td>
<td><span>{{p.countOfCollectedAccount}}</span></td> 
<td>{{p.sumOfArrearsOfAllocatedAmount | currency:"&#8377;"}}</td>
<td><span>{{p.sumOfCollectedAmount | currency:"&#8377;"}}</span></td>
 </tr>
 </table>

 </body>
</html>

And script

var myAppModule = angular.module("myApp", []);
myAppModule.controller("MyCtrl", function($scope,$filter){   

    var jsonData = [
       {
         "bucket": ">120",
         "productCode": "SBML",
         "countOfAllocatedAccount": 640,
         "countOfCollectedAccount": 0,
         "sumOfArrearsOfAllocatedAmount": 98413381,
         "sumOfCollectedAmount": 0
       },
       {
         "bucket": ">120",
         "productCode": "SBHL",
         "countOfAllocatedAccount": 1391,
         "countOfCollectedAccount": 0,
         "sumOfArrearsOfAllocatedAmount": 32103597,
         "sumOfCollectedAmount": 0
       },
       {
         "bucket": "1-30",
         "productCode": "SBHL",
         "countOfAllocatedAccount": 1081,
         "countOfCollectedAccount": 0,
         "sumOfArrearsOfAllocatedAmount": 3207770,
         "sumOfCollectedAmount": 0
       },
       {
         "bucket": "1-30",
         "productCode": "SBML",
         "countOfAllocatedAccount": 408,
         "countOfCollectedAccount": 0,
         "sumOfArrearsOfAllocatedAmount": 6811438,
         "sumOfCollectedAmount": 0
       },
       {
         "bucket": "31-60",
         "productCode": "SBHL",
         "countOfAllocatedAccount": 539,
         "countOfCollectedAccount": 0,
         "sumOfArrearsOfAllocatedAmount": 3153475,
         "sumOfCollectedAmount": 0
       },
       {
         "bucket": "31-60",
         "productCode": "SBML",
         "countOfAllocatedAccount": 214,
         "countOfCollectedAccount": 0,
         "sumOfArrearsOfAllocatedAmount": 5573527,
         "sumOfCollectedAmount": 0
       },
       {
         "bucket": "61-90",
         "productCode": "SBHL",
         "countOfAllocatedAccount": 321,
         "countOfCollectedAccount": 0,
         "sumOfArrearsOfAllocatedAmount": 2788035,
         "sumOfCollectedAmount": 0
       },
       {
         "bucket": "61-90",
         "productCode": "SBML",
         "countOfAllocatedAccount": 203,
         "countOfCollectedAccount": 0,
         "sumOfArrearsOfAllocatedAmount": 8079320,
         "sumOfCollectedAmount": 0
       },
       {
         "bucket": "91-120",
         "productCode": "SBHL",
         "countOfAllocatedAccount": 272,
         "countOfCollectedAccount": 0,
         "sumOfArrearsOfAllocatedAmount": 3028477,
         "sumOfCollectedAmount": 0
       },
       {
         "bucket": "91-120",
         "productCode": "SBML",
         "countOfAllocatedAccount": 93,
         "countOfCollectedAccount": 0,
         "sumOfArrearsOfAllocatedAmount": 4913095,
         "sumOfCollectedAmount": 0
       },
       {
         "bucket": "X",
         "productCode": "SBHL",
         "countOfAllocatedAccount": 272,
         "countOfCollectedAccount": 0,
         "sumOfArrearsOfAllocatedAmount": 3028477,
         "sumOfCollectedAmount": 0
       },
       {
         "bucket": "X",
         "productCode": "SBML",
         "countOfAllocatedAccount": 93,
         "countOfCollectedAccount": 0,
         "sumOfArrearsOfAllocatedAmount": 4913095,
         "sumOfCollectedAmount": 0
       }
     ];


 $scope.products =  $filter('orderByValue')(jsonData);
       console.log("hi");




 $scope.column = 'orderByValue';
 $scope.column = $scope.products;
 // sort ordering (Ascending or Descending). Set true for desending
 $scope.reverse = false; 




 // called on header click
 $scope.sortColumn = function(col){

//$scope.products = col;

 $scope.column =  col;
 $scope.column = $scope.products;
 if($scope.reverse){
 $scope.products =  $filter('orderByValue')(jsonData);

 $scope.reverse = false;
 $scope.reverseclass = 'arrow-up';

 }else{
 $scope.reverse = true;
 $scope.reverseclass = 'arrow-down';
$scope.reverseSort=true;

console.log("hmmm");
 }

 };

 // remove and change class
 $scope.sortClass = function(col){
 if($scope.column == col){
 if($scope.reverse){
  //$scope.products =  $filter('orderByValue')(jsonData);

 return 'arrow-down'; 
 //console.log("I call")


 }else{
 return 'arrow-up';

 //$scope.products = false;
 }
 }else{
 return '';

 }
 } 

});
myAppModule.filter('orderByValue', function() {
//$scope.reverse = true;
  return function(items, field) {
     var filtered = [],filteredX = [];
    angular.forEach(items, function(item) {
     if(item.bucket=="X")
        {
           filteredX.splice(0, 0, item);
        }else if(item.bucket.indexOf(">") !== -1) {
          filtered.push(item);
        }else
          {
           filteredX.push(item);
          }     
    });    
     angular.forEach(filtered, function(item) {
           filteredX.push(item);
        }); 
    return filteredX;
    //console.log("hi");
  };
});

And let me show you my plunker : https://plnkr.co/edit/pHPxJBD92utJxpFv4GhB?p=preview

Please help me out of this .

@ Jim Mischel i have hide the duplicate value for bucket but while sorting to desending order i'm able to see the duplicate values. — anil chean
– anil chean, Commented Nov 10, 2016 at 5:00

Irfan · Accepted Answer · 2016-11-10 05:50:02Z

2

If I am getting correctly below code might work for you. You can try ng-if condition and it will display based on reverse value

 <td>
    <span ng-if="!reverse" ng-show="products[$index-1].bucket != p.bucket" ng-model="sorting">{{p.bucket}}</span>
    <span ng-if="reverse" ng-show="products[$index].bucket != products[$index-1].bucket" ng-model="sorting">{{p.bucket}}</span>
</td>

answered Nov 10, 2016 at 5:50

Irfan

7,0593 gold badges46 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Irfan Over a year ago

@anilchean: Good to know :)

Sarun UK · Accepted Answer · 2016-11-10 05:32:20Z

1

You could use the unique filter from AngularUI and use it directly in the ng-repeat.(this is one of the approach)

AngularUI unique filter :- https://github.com/angular-ui/angular-uiOLDREPO/blob/master/modules/filters/unique/unique.js

usage: colection | uniq: 'property' you can filter by nested properties to : colection | uniq: 'property.nested_property'

Usage:-

function MainController ($scope) {
 $scope.orders = [
  { id:1, customer: { name: 'foo', id: 10 } },
  { id:2, customer: { name: 'bar', id: 20 } },
  { id:3, customer: { name: 'foo', id: 10 } },
  { id:4, customer: { name: 'bar', id: 20 } },
  { id:5, customer: { name: 'baz', id: 30 } },
 ];
}

HTML: We filters by customer id, i.e remove duplicate customers

<th>All customers list: </th>
<tr ng-repeat="order in orders | unique: 'customer.id'" >
   <td> {{ order.customer.name }} , {{ order.customer.id }} </td>
</tr>

result: All customers list:

foo 10
bar 20
baz 30

answered Nov 10, 2016 at 5:32

Sarun UK

6,7667 gold badges26 silver badges51 bronze badges

1 Comment

anil chean Over a year ago

@ Sarun UK only for reference i have given you the json data . but, i'm using the API to fetch the records .

Collectives™ on Stack Overflow

How to remove duplicate value while sorting in angularjs?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related