AngularJS ng-repeat unique is NOT working

Question

I'm trying to print just the unique values of names but i'm unable to do that.

html code:

<div ng-controller="MyCtrl">
    <div><input type="text" ng-model="nameFilter" placeholder="Search..." /></div>
    <p ng-repeat="contact in contacts | orderBy: 'customer.name'| unique:'customer.name'">{{ contact.customer.name }}</p>


</div>

JS code:

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

function MyCtrl($scope) {
    $scope.nameFilter = '';
    $scope.contacts = [
        { 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 } },
        { id:5, customer: { name: 'tar', id: 30 } },
        { id:5, customer: { name: 'got', id: 30 } },
        { id:5, customer: { name: 'man', id: 30 } },
        { id:5, customer: { name: 'baz', id: 30 } },
    ];

}

the jsfiddle is here: http://jsfiddle.net/nvarun123/0tgL7u6e/73/

This code is working if i remove unique from the ng-repeat.

Your code is missing the `unique` custom filter. That is not one of the built-in filters, so you have to write that yourself. — Matthew Cawley, Sep 13 '17 at 21:22
I'm afraid not, [these are the built-in filters](https://docs.angularjs.org/api/ng/filter) — Matthew Cawley, Sep 13 '17 at 21:25

score 2 · Accepted Answer · answered Sep 13 '17 at 21:33

Here you go, I used the unique filter in angular UI directives, link in the bottom. I have made a small change in the directive for implementing deep finding using string. The details are inside the references.

Here is a demo of the filter.

JSFiddle Demo

Change made inside unique filter.

var extractValueToCompare = function (item) {
        if (angular.isObject(item) && angular.isString(filterOn)) {
          return deepFind(item,filterOn);
        } else {
          return item;
        }
      };

As seen above I am implementing the deepFind function. The function is also provided below.

function deepFind(obj, path) {
  var paths = path.split('.')
    , current = obj
    , i;

  for (i = 0; i < paths.length; ++i) {
    if (current[paths[i]] == undefined) {
      return undefined;
    } else {
      current = current[paths[i]];
    }
  }
  return current;
}

References:

Matthew Cawley · Answer 2 · 2017-09-13T22:59:36.457

0

Here's a simple custom filter that should meet your needs:

app.filter("unique", function thisFilter() {
  return function(input){
    var seen = { objectNames: [] };
    return input.filter(function(obj){
      return !seen.objectNames.includes(obj.customer.name) 
        && seen.objectNames.push(obj.customer.name)
    })
  }
});

edited Sep 13 '17 at 22:59

answered Sep 13 '17 at 22:33

Matthew Cawley

2,688
1
8
19

AngularJS ng-repeat unique is NOT working

2 Answers2