AngularJS ng-repeat to display group names from JSON data

Question

How Display stores,bookmarks,favorites using below JSON Data

JSON data (vm.bookmarks):

[
    {
        "category": "stores",
        "title": "store1",
        "link": "http://www.store1.com",
    },
    {
        "category": "stores",
        "title": "store1",
        "link": "http://www.store2.com",
    },
    {
        "category": "bookmarks",
        "title": "bookmark1",
        "link": "http://www.bookmark1.com",
    },
    {
        "category": "bookmarks",
        "title": "bookmark2",
        "link": "http://www.bookmark2.com",
    },
    {
        "category": "bookmarks",
        "title": "bookmark3",
        "link": "http://www.bookmark3.com",
    },
    {
        "category": "favorites",
        "title": "favorites1",
        "link": "http://www.favorites1.com",
    },
    {
        "category": "favorites",
        "title": "favorites2",
        "link": "http://www.favorites2.com",
    }
]

I want to list only categories' names using ng-repeat:

<div ng-repeat="item in vm.bookmarks|groupBy:'category'">
    <h2>{{item.category}}</h2>
</div>

I want this to be displayed:

stores
bookmarks
favorites

But it displays nothing! What am I doing wrong?

P.S

I was using filters without injecting anything, like this:

<div ng-repeat="item in vm.bookmarks|filter:{category:'flyers'}" >
    <a href="{{item.link}}">{{item.title}}</a>
</div>

Not sure if I need to inject angular-filter to use groupBy filter - why?

Sajeetharan · Accepted Answer · 2017-10-01T19:07:46.803

You do not need to use (key, value) , also you need to inject angular.filter as dependency

var MyApp = angular.module("MyApp",['angular.filter']);

<ul class="nav nav-tabs" data-tabs="tabs" 
    ng-repeat="bookmark in vm.bookmarks|groupBy:'category'">
    <li><a href="@tabid" data-toggle="tab">{{bookmark.category}}</a></li>
</ul>

DEMO

var app = angular.module("myApp", ['angular.filter']);
app.controller("SimpleController", function($scope) {
  this.bookmarks = [
    {
        "category": "stores",
        "title": "store1",
        "link": "http://www.store1.com",
    },
    {
        "category": "stores",
        "title": "store1",
        "link": "http://www.store2.com",
    },
    {
        "category": "bookmarks",
        "title": "bookmark1",
        "link": "http://www.bookmark1.com",
    },
    {
        "category": "bookmarks",
        "title": "bookmark2",
        "link": "http://www.bookmark2.com",
    },
    {
        "category": "bookmarks",
        "title": "bookmark3",
        "link": "http://www.bookmark3.com",
    },
    {
        "category": "favorites",
        "title": "favorites1",
        "link": "http://www.favorites1.com",
    },
    {
        "category": "favorites",
        "title": "favorites2",
        "link": "http://www.favorites2.com",
    }
];
var vm = this;
  
});

<!DOCTYPE html>
<html>
<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="myApp">
    <div>
      <div data-ng-controller="SimpleController as vm">
      <ul class="nav nav-tabs" data-tabs="tabs" 
    ng-repeat="(key, value) in (vm.bookmarks|groupBy:'category')">
    <div ng-repeat="cat in value | unique:'category' ">
          <h1> {{cat.category}}</h1>
    </div>
  </ul>
        </div>
    </div>
</body>

</html>

filter is built-in in ng service, why do I need to inject it? as far as I know, using groupBy does not require injecting anything per documentation. sorry, but the code fragment you posted doesnt work either — monstro, Oct 01 '17 at 19:01
Hmm, interesting... thank you, do you have a reference to there it says that I need to inject angular-filter ? I have been using filters all the time without injecting anything — monstro, Oct 01 '17 at 19:12
yes there are filters but limited https://stackoverflow.com/questions/14800862/how-can-i-group-data-with-an-angular-filter — Sajeetharan, Oct 01 '17 at 19:14
Yes, it seems you are right, groupBy is not a part of built-in filters... hm weird, I though its included. — monstro, Oct 01 '17 at 19:18

AngularJS ng-repeat to display group names from JSON data

1 Answers1