How to show unique values once using ng-repeat?

Question

Using AngularJS, I'm trying to only show items from a database once, link.DocCategory and link.DocSubCategory. Using | unique: 'DocCategory' did not give me my expected result as it actually displays DocCategory once but also removes other instances that share the same DocCategory. I'd like to show the DocCategory once with it's related DocSubCategory items showing once with their related URL info showing.

Here is my JSON structure:

{
  "d": {
    "results": [{
      "URL": {
        "Description": "Capabilities",
        "Url": "https://www.test.com"
      },
      "Comments": null,
      "DocCategory": "The LIFE Links",
      "DocSubCategory": "The Sales Program",
      "Order0": 1,
      "Description": "<div class=\"ExternalClass7655A65DDC5041F9B50820BD16C94366\"><p>\u200bThis is a link to show all of the capabilities that we have to offer.</p></div>",
      "Name": "Capabilities",
      "ID": 1
    }, {
      "URL": {
        "Description": "Abilities",
        "Url": "https://www.test2.com"
      },
      "Comments": null,
      "DocCategory": "The LIFE Links",
      "DocSubCategory": "The Sales Program",
      "Order0": 1,
      "Description": "<div class=\"ExternalClass7655A65DDC5041F9B50820BD16C94366\"><p>\u200bThis is a link to show all of the abilities that we have to offer.</p></div>",
      "Name": "Capabilities",
      "ID": 1
    }
  ]}
}

Here is my HTML:

<div ng-app="myApp">
  <div ng-controller="MainCtrl">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-6" ng-repeat= "link in links | unique:'DocCategory'">
          <h1 class="category">{{link.DocCategory}}<h1>
          <h2 class="subcategory"><span class="subcatspan">{{link.DocSubCategory}}</span></h2>
          <a class="links" href={{link.URL.Url}} target="_blank">{{link.URL.Description}}</a>
        </div>
      </div>
    </div>
  </div>
</div>

Edit: I am trying to hide duplicate items in the view, not remove them altogether.

Possible duplicate of [How to make ng-repeat filter out duplicate results](https://stackoverflow.com/questions/15914658/how-to-make-ng-repeat-filter-out-duplicate-results) — Daniel, Jan 31 '18 at 02:44
@Sajeetharan I want to group by DocCategory. I’m ordering by `Order0` from the JSON. — cfoster5, Jan 31 '18 at 03:11

score 0 · Answer 1 · answered Jan 31 '18 at 03:19

You need to use 'grouBy' with angular-filter

DEMO

var app = angular.module('test',['angular.filter'])
app.controller('testCtrl',function($scope){
  $scope.data= {
  "d": {
    "results": [{
      "URL": {
        "Description": "Capabilities",
        "Url": "https://www.test.com"
      },
      "Comments": null,
      "DocCategory": "The LIFE Links",
      "DocSubCategory": "The Sales Program",
      "Order0": 1,
      "Description": "first",
      "Name": "Capabilities",
      "ID": 1
    }, {
      "URL": {
        "Description": "Abilities",
        "Url": "https://www.test2.com"
      },
      "Comments": null,
      "DocCategory": "The LIFE Links",
      "DocSubCategory": "The Sales Program",
      "Order0": 1,
      "Description": "<div class=\"ExternalClass7655A65DDC5041F9B50820BD16C94366\"><p>\u200bThis is a link to show all of the abilities that we have to offer.</p></div>",
      "Name": "Capabilities",
      "ID": 1
    }
  ]}
};
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.16/angular-filter.js" > </script>

<body ng-app='test' ng-controller='testCtrl'>
 <div class="row" ng-repeat="log in data.d.results | groupBy: 'DocCategory'">
        <div class="col-md-12">
            <table>
                <thead>
                    <tr>
                        <th>DocSubCategory</th>
                        <th>Description</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="item in log" >
                        <td>{{item.DocSubCategory }}</td>
                        <td>{{item.Description}}</td>
                        
                    </tr>
                </tbody>
            </table>
        </div>
</body>

How to show unique values once using ng-repeat?

1 Answers1