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.

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

<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:

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.

<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:

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

Elliot Forbes
Twitter: @Elliot_f

Hey, I'm Elliot and I've been working on TutorialEdge for the last 4 years! If my work has helped you in any way, shape, or form then please consider supporting my work.

become a patron Buy Me A Coffee