Removing Duplicate Entries from ng-repeat in AngularJS Image

Removing Duplicate Entries from ng-repeat in AngularJS

This tutorial was built using Angular 1.6. Earlier or later versions of the code may not work as intended.

This tutorial will show you how you can filter out duplicates when using the ng-repeat directive in AngularJS. We’ll be passing in an array of JSON Objects and filtering based on multiple different things within each object.

Implementing our Test Controller

We’ll start off with a very simple angular controller that will have a list of item names, some of which are duplicates.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
var testApp = angular.module('testApp', []);

testApp.controller('testController' , function ($scope) {
    $scope.list = [
        { 'name' : "ipad" },
        { 'name' : "ipad" },
        { 'name' : "ipad" },
        { 'name' : "ipod" },
        { 'name' : "iMac" },
        { 'name' : "iMac" },
        { 'name' : "iMac" },
        { 'name' : "iPhone" },
        { 'name' : "iWatch" },
        { 'name' : "iWatch" },
        { 'name' : "iWatch" },
        { 'name' : "iPeed" }
        ];
});

Next we’ll introduce our index file that we will be using to showcase our simple list. To showcase our list we’ll be using a very simple ng-repeat that iterates through the list array that we’ve defined within our controller

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<html ng-app="testApp">
<head>
    <title>AngularJS Removing Duplicates from ng-repeat</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body ng-controller="testController">
    
    <ul>
        <li ng-repeat="item in list">{{item.name}}</li>
    </ul>
    
    <script src="script.js"></script>
</body>
</html>

You’ll see the ng-repeat directive that will at this time print out every item from our list, regardless of whether or not it is a duplicate.

Filtering Out Duplicates

Now that we’ve got some test data setup it’s time to write our filter. This will be written just above our controller declaration in our scripts.js file and will look a little something like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
var testApp = angular.module('testApp', []);

// here we define our unique filter
testApp.filter('unique', function() {
   // we will return a function which will take in a collection
   // and a keyname
   return function(collection, keyname) {
      // we define our output and keys array;
      var output = [], 
          keys = [];
      
      // we utilize angular's foreach function
      // this takes in our original collection and an iterator function
      angular.forEach(collection, function(item) {
          // we check to see whether our object exists
          var key = item[keyname];
          // if it's not already part of our keys array
          if(keys.indexOf(key) === -1) {
              // add it to our keys array
              keys.push(key); 
              // push this item to our final output array
              output.push(item);
          }
      });
      // return our array which should be devoid of
      // any duplicates
      return output;
   };
});

testApp.controller('testController' , function ($scope) {
    $scope.list = [
        { 'name' : "ipad" },
        { 'name' : "ipad" },
        { 'name' : "ipad" },
        { 'name' : "ipod" },
        { 'name' : "iMac" },
        { 'name' : "iMac" },
        { 'name' : "iMac" },
        { 'name' : "iPhone" },
        { 'name' : "iWatch" },
        { 'name' : "iWatch" },
        { 'name' : "iWatch" },
        { 'name' : "iPeed" }
        ];
});

Modifying our Index File

Now that we’ve written our filter we need to add one slight modification to our ng-repeat code like so.

1
<li ng-repeat="item in list | unique : 'name'">{{item.name}}</li>

And that should be it removing all of our duplicates from our list from us. I hope you found this useful and if so then please share it around the world!

Filtering by Nested Properties

Removing duplicates from the list based on nested properties can be achieved by doing the following:

1
<li ng-repeat="item in list | unique:'name.nested_property'>{{item.name}}</li>
Was This Post Helpful?
Submit a PR: Edit on Github