How to make ng-repeat filter out duplicate results

Question

I m running a simple ng-repeat over a JSON file and want to get category names  There are about 100 objects  each belonging to a category - but there are only about 6 categories    My current code is this    lt select ng-model  orderProp   gt     lt option ng-repeat  place in places  value    place category    gt   place category   lt  option gt   lt  select gt    The output is 100 different options  mostly duplicates  How do I use Angular to check whether a   place category   already exists  and not create an option if it s already there   edit  In my javascript   scope places   JSON data  just to clarify

User · Answer

If you want to get unique data based on the nested key:

app.filter('unique', function() {
        return function(collection, primaryKey, secondaryKey) { //optional secondary key
          var output = [], 
              keys = [];

          angular.forEach(collection, function(item) {
                var key;
                secondaryKey === undefined ? key = item[primaryKey] : key = item[primaryKey][secondaryKey];

                if(keys.indexOf(key) === -1) {
                  keys.push(key);
                  output.push(item);
                }
          });

          return output;
        };
    });

Call it like this :

<div ng-repeat="notify in notifications | unique: 'firstlevel':'secondlevel'">

User · Answer

Add this filter   app filter  unique   function      return function   collection  keyname    var output           keys          found        if   keyname         angular forEach collection  function  row            var is found   false          angular forEach found  function  foundRow                 if  foundRow    row                    is found   true                                                                 if  is found    return            found push row           output push row              else        angular forEach collection  function  row            var item   row keyname           if  item     null    item     undefined  return          if  keys indexOf item      -1                keys push item               output push row                        return output           Update your markup    lt select ng-model  orderProp   gt      lt option ng-repeat  place in places   unique  value    place category    gt   place category   lt  option gt   lt  select gt

User · Answer

You could use the unique filter from AngularUI  source code available here  AngularUI unique filter  and use it directly in the ng-options  or ng-repeat     lt select ng-model  orderProp  ng-options  place category for place in places   unique  category   gt       lt option value  0  gt Default lt  option gt         unique options from the categories  lt  select gt

User · Answer

Here s a straightforward and generic example   The filter   sampleApp filter  unique   function           Take in the collection and which field        should be unique      We assume an array of objects here      NOTE  We are skipping any object which        contains a duplicated value for that        particular key   Make sure this is what        you want    return function  arr  targetField         var values               i           unique          l   arr length           results               obj          Iterate over all objects in the array        and collect all unique values     for  i   0  i  lt  arr length  i              obj   arr i             check for uniqueness       unique   true        for  v   0  v  lt  values length  v              if  obj targetField     values v               unique   false                              If this is indeed unique  add its            value to our values and push            it onto the returned array       if  unique            values push  obj targetField             results push  obj                       return results            The markup    lt div ng-repeat    item in items   unique  name   gt       item name     lt  div gt   lt script src  your filters js  gt  lt  script gt

User · Answer

UPDATE  I was recomending the use of Set but sorry this doesn t work for ng-repeat  nor Map since ng-repeat only works with array  So ignore this answer  anyways if you need to filter out duplicates one way is as other has said using angular filters  here is the link for it to the getting started section     Old answer  Yo can use the ECMAScript 2015  ES6  standard Set Data structure  instead of an Array Data Structure this way you filter repeated values when adding to the Set   Remember sets don t allow repeated values   Really easy to use   var mySet   new Set     mySet add 1   mySet add 5   mySet add  some text    var o    a  1  b  2   mySet add o    mySet has 1      true mySet has 3      false  3 has not been added to the set mySet has 5                   true mySet has Math sqrt 25        true mySet has  Some Text  toLowerCase        true mySet has o      true  mySet size     4  mySet delete 5      removes 5 from the set mySet has 5         false  5 has been removed  mySet size     3  we just removed one value

User · Answer

Here s a template-only way to do it  it s not maintaining the order  though   Plus  the result will be ordered as well  which is useful in most cases    lt select ng-model  orderProp   gt      lt option ng-repeat  place in places   orderBy  category  as sortedPlaces  data-ng-if  sortedPlaces  index-1  category    place category  value    place category    gt          place category       lt  option gt   lt  select gt

User · Answer

Or you can write your own filter using lodash   app filter  unique   function         return function  arr  field            return   uniq arr  function a    return a field

User · Answer

It seems everybody is throwing their own version of the unique filter into the ring  so I ll do the same   Critique is very welcome   angular module  myFilters          filter  unique   function          return function  items  attr          var seen             return items filter function  item            return  angular isUndefined attr      item hasOwnProperty attr               true             seen item attr      seen item attr

User · Answer

Create your own array    lt select name  cmpPro  ng-model  test3 Product  ng-options  q for q in productArray track by q  gt       lt option value     gt Plans lt  option gt   lt  select gt    productArray      angular forEach  scope leadDetail  function value key       var index    scope productArray indexOf value Product       if index     -1                 scope productArray push value Product

User · Answer

This might be overkill  but it works for me   Array prototype contains   function  item  prop    var arr   this valueOf    if  prop    undefined    prop    null        for  var i   0  i  lt  arr length  i              if  arr i     item                return true                    else       for  var i   0  i  lt  arr length  i              if  arr i  prop     item  return true          return false     Array prototype distinct   function  prop       var arr   this valueOf       var ret          for  var i   0  i  lt  arr length  i             if   ret contains arr i  prop   prop                ret push arr i                     arr          arr   ret     return arr      The distinct function depends on the contains function defined above  It can be called as array distinct prop   where prop is the property you want to be distinct   So you could just say  scope places distinct  category

User · Answer

You can use  unique  aliases  uniq  filter in angular filter module   usage  colection   uniq   property   you can also filter by nested properties    colection   uniq   property nested property   What you can do  is something like that    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 filter by customer id  i e remove duplicate customers   lt th gt Customer list   lt  th gt   lt tr ng-repeat  order in orders   unique   customer id    gt      lt td gt     order customer name         order customer id     lt  td gt   lt  tr gt    result Customer list  foo 10 bar 20 baz 30

User · Answer

I had an array of strings  not objects and i used this approach   ng-repeat  name in names   unique    with this filter   angular module  app   filter  unique   unique   function unique    return function arry           Array prototype getUnique   function            var u       a               for var i   0  l   this length  i  lt  l    i              if u hasOwnProperty this i                    continue                          a push this i               u this i     1                    return a             if arry     undefined    arry length     0             return               else            return arry getUnique

User · Answer

this code works for me   app filter  unique   function        return function  arr  field        var o       i  l   arr length  r           for i 0  i lt l i  1          o arr i  field     arr i             for i in o          r push o i              return r            and then  var colors  filter  unique   items  color

User · Answer

I decided to extend  thethakuri s answer to allow any depth for the unique member  Here s the code  This is for those who don t want to include the entire AngularUI module just for this functionality  If you re already using AngularUI  ignore this answer   app filter  unique   function         return function collection  primaryKey      no need for secondary key       var output                  keys                 var splitKeys   primaryKey split         split by period         angular forEach collection  function item                var key                   angular copy item  key               for var i 0  i lt splitKeys length  i                     key   key splitKeys i         the beauty of loosely typed js                               if keys indexOf key      -1                  keys push key                 output push item                                  return output               Example   lt div ng-repeat  item in items   unique    subitem subitem subitem value   gt  lt  div gt

User · Answer

If you want to list categories  I think you should explicitly state your intention in the view    lt select ng-model  orderProp   gt     lt option ng-repeat  category in categories            value    category    gt        category      lt  option gt   lt  select gt    in the controller    scope categories    scope places reduce function sum  place      if  sum indexOf  place category    lt  0  sum push  place category      return sum

User · Answer

None of the above filters fixed my issue so I had to copy the filter from official  github doc  And then use it as explained in the above answers  angular module  yourAppNameHere   filter  unique   function        return function  items  filterOn     if  filterOn     false      return items     if   filterOn    angular isUndefined filterOn    amp  amp  angular isArray items       var hashCheck       newItems          var extractValueToCompare   function  item        if  angular isObject item   amp  amp  angular isString filterOn           return item filterOn         else         return item                angular forEach items  function  item        var valueToCheck  isDuplicate   false       for  var i   0  i  lt  newItems length  i            if  angular equals extractValueToCompare newItems i    extractValueToCompare item              isDuplicate   true          break                    if   isDuplicate          newItems push item                  items   newItems    return items

[angularjs] How to make ng-repeat filter out duplicate results

Examples related to angularjs

Examples related to angularjs-ng-repeat