Prevent duplicates in two different ng-repeats

Question

I am working on ng-table and facing an issue where I need to prevent duplicates from getting displayed via two different ng-repeats.

The JSON hierarchy is in this manner:

{
    "PageSize": 10,
    "TotalRecords": 54,
    "Users": [
        {
            "ID": 1,
            "FirstName": "John",
            "LastName": "Doe",
            "Projects": [
                {
                    "Id": 1,
                    "Name": "Asean",
                    "Categories": [
                        {
                            "Id": 1,
                            "Name": "Category1",
                            "Markets": [
                                {
                                    "Id": 2,
                                    "Name": "Indonesia"
                                },
                                {
                                    "Id": 4,
                                    "Name": "Malaysia"
                                }
                            ]
                        },
                        {
                            "Id": 2,
                            "Name": "Category2",
                            "Markets": [
                                {
                                    "Id": 2,
                                    "Name": "Indonesia"
                                },
                                {
                                    "Id": 4,
                                    "Name": "Malaysia"
                                },
                                {
                                    "Id": 7,
                                    "Name": "Japan"
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

And the HTML for ng-table is:

<table class="table" ng-table="tableParams" id="relationTable">
    <tr ng-repeat="mapping in $data">
        <td class="text-left" data-title="'User'">{{mapping.FirstName}}</td>
        <td class="text-left" data-title="'Category'"><span ng-repeat="category in mapping.Projects[0].Categories track by $index">{{category.Name}}{{$last ? '' : ', '}}</span></td>
        <td class="text-left" data-title="'Market'"><span ng-repeat="category in mapping.Projects[0].Categories track by $index"><span ng-repeat="market in category.Markets track by $index">{{market.Name}}{{$last ? '' : ', '}}</span>{{$last ? '' : ', '}}</span></td>
    </tr>
</table>

From above code, I generate a table where I am facing duplicates in 'Markets' column. The table looks like:

+------+----------------------+-------------------------------------------------+
|_Name_|______Categories______|_____________________Markets_____________________|
+------+----------------------+-------------------------------------------------+
|_John_|_Category1,_Category2_|_Indonesia,_Malaysia,_Indonesia,_Malaysia,_Japan_|
+------+----------------------+-------------------------------------------------+

As you can see, here Indonesia and Malaysia are being displayed twice. Please suggest a method by which I can prevent the duplicates from being displayed in the 'Markets' column.

this may help you http://stackoverflow.com/questions/15914658/angular-js-how-to-make-ng-repeat-filter-out-duplicate-results — tech-gayan, Sep 16 '15 at 08:50
what does your $data look like ? or the JSON you provided is $data ? — Alok Mishra, Sep 16 '15 at 08:56
@Iceburg, thanks for a prompt response. Though I've already looked into AngularUI's unique. My problem remains the same as the `ngRepeat` with 'Market' values is nested under a 'categories' `ngRepeat`. This results in unique values in each `ngRepeat` and the duplicates are again rendered on the display. — Vibhor Dube, Sep 16 '15 at 08:58

score 0 · Answer 1 · answered Sep 16 '15 at 08:57

0

Use, <span ng-repeat="market in category.Markets track by $index | unique:'Name'">{{market.Name}}{{$last ? '' : ', '}}</span>{{$last ? '' : ', '}}</span>

(source code : unique filter)

answered Sep 16 '15 at 08:57

Priyanka

232
3
12

This won't solve the problem. If you look at the JSON, one `ngRepeat` over 'Markets' won't bring the duplicates. It'll be the second ngRepeat which will bring the duplicates. – Vibhor Dube Sep 16 '15 at 09:00

score 0 · Answer 2 · answered Sep 16 '15 at 09:11

Quick fix Try something with this. later i will add more to this. but i couldn't test this. its up to you. Sample

<div ng-repeat="item in items | unique: 'id'"></div>

app.filter('unique', function() {
return function(collection, keyname) {
  var output = [], 
      keys = [];

  angular.forEach(collection, function(item) {
      var key = item[keyname];
      if(keys.indexOf(key) === -1) {
          keys.push(key);
          output.push(item);
      }
  });
  return output;
 };
});

This works on duplicates in one array. I'm talking about finding duplicates in two different arrays. — Vibhor Dube, Sep 16 '15 at 09:14

Alok Mishra · Accepted Answer · 2015-09-16T10:31:30.980

0

i have done the needful for you by creating a very simple AngularJS filter .

angular.module('ui.bootstrap.demo').filter('unique',function(){

  var sub=[];
  var flag=false;
  var result="";
  return function(input){

    for(var i=0;i<sub.length;i++){
      console.log('inside for loop');
      if(input==sub[i])
      {
        flag=true;
        break;
      }


    }
    if(flag){
      result="";
      flag=false;
      return result;
    }
    else{
      sub.push(input);
      result=input;
    }
    return result;

  };

});

you need to change a bit of your HTML code , replace {{market.Name}} with {{market.Name | unique }}

here is the plunkr

edited Sep 16 '15 at 10:31

answered Sep 16 '15 at 10:26

Alok Mishra

926
13
39

Man! You are just awesome. Instead of comparing `Name`, can we do this on `ID`? – Vibhor Dube Sep 16 '15 at 10:36
1

yes why not ! All you need to do is to change `{{market.Name | unique }}` to `{{market.Id | unique}}` – Alok Mishra Sep 16 '15 at 10:45
I want to display `Name` and pass `Id`. Should it be like `{{market.Name | unique:marketId}}`? – Vibhor Dube Sep 16 '15 at 10:49
http://plnkr.co/edit/YwjN6C1Qqx7VGjMUvfng?p=preview check this out . In this i am passing `market.Id` and displaying `market.Name` using `ng-show` on the basis of boolean value returned by 'unique' filter . – Alok Mishra Sep 16 '15 at 11:03

Prevent duplicates in two different ng-repeats

3 Answers3