I would like to filter an array by unique category in controller and then use the filtered array with ng-repeat in html page. My array is:

$scope.tabs = [
                {OBJECTID:1, TYPES:8, Category:"Pharmacies",Name_EN:"antonis" , text : "Home"},
                {OBJECTID:2, TYPES:8, Category:"Opticians",Name_EN:"antonis" , text : "Games"},
                {OBJECTID:3, TYPES:8, Category:"Doctors", Name_EN:"antonis" , text : "Mail"},
                {OBJECTID:4, TYPES:8, Category:"Clinics", Name_EN:"antonis" , text : "Car"},
                {OBJECTID:5, TYPES:8, Category:"Clinics", Name_EN:"antonis" , text : "Profile"},
                {OBJECTID:6, TYPES:8, Category:"Clinics", Name_EN:"antonis" , text : "Favourites"},
                {OBJECTID:7, TYPES:8, Category:"Pharmacies",Name_EN:"antonis" , text : "Chats"},
                {OBJECTID:8, TYPES:4, Category:"Sights",Name_EN:"antonis" , text : "Settings"},
                {OBJECTID:9, TYPES:4, Category:"Meuseums",Name_EN:"antonis"  ,text : "Home"},
                {OBJECTID:10, TYPES:4, Category:"Meuseums",Name_EN:"antonis1" , text : "Home"}  

            ];

the filtered array will be like this:

$scope.FilteredArray = [
                {Category:"Pharmacies"},
                {Category:"Opticians"},
                {Category:"Doctors"},
                {Category:"Clinics"},
                {Category:"Sights"},
                {Category:"Meuseums"},

            ];

Thanks in advance.

I would like to filter an array by unique category in controller and then use the filtered array with ng-repeat in html page. My array is:

$scope.tabs = [
                {OBJECTID:1, TYPES:8, Category:"Pharmacies",Name_EN:"antonis" , text : "Home"},
                {OBJECTID:2, TYPES:8, Category:"Opticians",Name_EN:"antonis" , text : "Games"},
                {OBJECTID:3, TYPES:8, Category:"Doctors", Name_EN:"antonis" , text : "Mail"},
                {OBJECTID:4, TYPES:8, Category:"Clinics", Name_EN:"antonis" , text : "Car"},
                {OBJECTID:5, TYPES:8, Category:"Clinics", Name_EN:"antonis" , text : "Profile"},
                {OBJECTID:6, TYPES:8, Category:"Clinics", Name_EN:"antonis" , text : "Favourites"},
                {OBJECTID:7, TYPES:8, Category:"Pharmacies",Name_EN:"antonis" , text : "Chats"},
                {OBJECTID:8, TYPES:4, Category:"Sights",Name_EN:"antonis" , text : "Settings"},
                {OBJECTID:9, TYPES:4, Category:"Meuseums",Name_EN:"antonis"  ,text : "Home"},
                {OBJECTID:10, TYPES:4, Category:"Meuseums",Name_EN:"antonis1" , text : "Home"}  

            ];

the filtered array will be like this:

$scope.FilteredArray = [
                {Category:"Pharmacies"},
                {Category:"Opticians"},
                {Category:"Doctors"},
                {Category:"Clinics"},
                {Category:"Sights"},
                {Category:"Meuseums"},

            ];

Thanks in advance.

• javascript
• angularjs

• 1 Can you show us what would be the results of the filtered array ? – Weedoze Commented Oct 14, 2016 at 6:43

5 Answers 5

Use unique filter inside controller and apply ng-repeat on filtered array

//Filtered array
      $scope.filteredArray =  $filter('unique')($scope.tabs,'Category');

<ul>
    <li ng-repeat="tab in filteredArray">{{tab.Category}}</li>
</ul>

Filter

angular.module('myapp').filter('unique', function () {

  return function (items, filterOn) {

    if (filterOn === false) {
      return items;
    }

    if ((filterOn || angular.isUndefined(filterOn)) && angular.isArray(items)) {
      var hashCheck = {}, newItems = [];

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

      angular.forEach(items, function (item) {
        var valueToCheck, isDuplicate = false;

        for (var i = 0; i < newItems.length; i++) {
          if (angular.equals(extractValueToCompare(newItems[i]), extractValueToCompare(item))) {
            isDuplicate = true;
            break;
          }
        }
        if (!isDuplicate) {
          newItems.push(item);
        }

      });
      items = newItems;
    }
    return items;
  };
});

FULL EXAMPLE

You can also do it without angular filter. If you have used lodash module in your angular application then you can simply do it with below lodash function. It will return uniq records by whatever key you want.

_.uniqBy([{ 'x': 1 }, { 'x': 2 }, { 'x': 1 }], 'x');
// => [{ 'x': 1 }, { 'x': 2 }]

You can do this too,

  $scope.unique = {};
  $scope.distinct = [];
  for (var i in $scope.tabs) {
    if (typeof($scope.unique[$scope.tabs[i].Category]) == "undefined") {
      $scope.distinct.push($scope.tabs[i].Category);
    }
    $scope.unique[$scope.tabs[i].Category] = 0;
  }

DEMO

That code could be used to create a method this will give you an array of strings also you can modify to create object array -

var flags = [], $scope.FilteredArray= [], l = $scope.tabs.length, i;
for( i=0; i<l; i++) {
    if( flags[$scope.tabs[i].Category]) continue;
    flags[$scope.tabs[i].Category] = true;
    $scope.FilteredArray.push($scope.tabs[i].Category);
}

Use the default unique filter:

<select ng-model="tab" ng-repeat="uni in tabs | unique:'Category'">
</select>