Listing out unique value from JSON data in AngularJS

Question

Let's say I have a set of JSON data for products. Each product has a category assigned to it. How could I go about listing out all of the categories but only displaying each category once. Here's what I have currently which lists out all categories, including duplicates:

(function() {
    var app = angular.module('store', []);
    app.controller('StoreController', ['$scope', function($scope) {
      var vm = this;
      
      $scope.products = [{
        "category": "Cat1",
        "name": "Product1"
      }, {
        "category": "Cat1",
        "name": "Product2"
      }, {
        "category": "Cat2",
        "name": "Product3"
      }, {
        "category": "Cat3",
        "name": "Product4"
      }]
   }]);
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html lang="en" ng-app="store">
<body ng-controller="StoreController as vm">
<div ng-repeat="product in products" class="category">
  <button>{{product.category}}</button>
</div>
</body>
</html>

So I want Cat1 to only be displayed once.

tymeJV · Accepted Answer · 2017-08-17 15:13:20Z

2

You could get a list of unique categories like:

$scope.uniqueCategories = Object.keys($scope.products.reduce(function(categoryMap, product) {
    categoryMap[product.category] = 1;
    return categoryMap;
}, {})); //["Cat1", "Cat2", "Cat3"]

answered Aug 17, 2017 at 15:13

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Listing out unique value from JSON data in AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related