Grouping retrieved data using the $resource service in AngularJS

Question

I've got a REST API for my web app which returns one JSON which joins several tables together from my database. I'm able to pull these into my AngularJS app without any issues, however when I want to group the output by one of the fields, I can't find a clear way to do this.

As an example of how I've currently got my services:

angular.module('myapp.services', ['ngResource'])
.factory('Item', function($resource) {
    return $resource('api/items/:itemId', {}, {
        query: {method: 'GET', isArray: true}
    });
})

Which I then pull in via:

<div class="items">
    <div class="item" ng-repeat="item in items">
        <div ng-include="'/partials/item.html'"></div>
    </div>
</div>

What I would like to do is display collections of these items in a list with them grouped according to group name. So a call to:

/api/collections/:collection_id/items

Would return JSON output like so (below is for one item):

[ { item_id: 1,
    item_name: 'Monkey',
    item_action: 'Eats a banana',
    group_id: 1,
    group_name: 'Primates',
    collection_id: 1,
    collection_name: 'Animals'
} ]

So I'd want to be able to output one collection of them like so:

<h1>Animals</h1>
<div class="group">
    <h2>Primates</h2>
    <div class="items">
            <div class="item">
                    <p>Monkey - eats a banana</p>
                    <p>Gorilla - bangs his chest</p>
            </div>
    </div>
</div>
<div class="group">
    <h2>Fish</h2>
    <div class="items">
            <div class="item">
                    <p>Salmon - sings Sinatra songs</p>
            </div>
    </div>
</div>
<div class="group">
    <h2>Insects</h2>
    <div class="items">
            <div class="item">
                    <p>Ant - Forages for food</p>
            </div>
    </div>
</div>

Is this possible using some sort of ng-repeat structure like in my example above? I'm almost certain it is, but I'm new to AngularJS and have been having difficulty finding any examples like this online.

I'd like to keep everything being read from that one JSON file to keep requests to the database to a minimum (one request on page load and then the JS deals with the rest).

Any help is greatly appreciated!

Check out both answers here: http://stackoverflow.com/questions/14800862/how-can-i-group-data-with-an-angular-filter — lucuma, May 21 '13 at 01:10

score 1 · Answer 1 · answered Jun 09 '15 at 13:32

You can achieve by nested filters one filter for grouping and other is nested with group filter

here is html template:

<div ng-app ng-controller="Main">
<h1>{{collectionName}}</h1>
<div class="group" ng-repeat="itemPerGroup in itemsToFilter() | filter:filterItems">
<h2>{{itemPerGroup.group_name}}</h2>
    <div class="items">
            <div class="item">
                    <p ng-repeat="item in items | filter:{group_name: itemPerGroup.group_name}">{{item.item_name}}</p>
            </div>
    </div>
</div>

controller script:

function Main($scope) {
$scope.items = [{item_id: 1,
item_name: 'Monkey',
item_action: 'Eats a banana',
group_id: 1,
group_name: 'Primates',
collection_id: 1,
                   collection_name: 'Animals'},
                {item_id: 1,
item_name: 'Salmon',
item_action: 'sings Sinatra songs',
group_id: 1,
group_name: 'Fish',
collection_id: 1,
collection_name: 'Animals'},
                {item_id: 1,
item_name: 'Ant ',
item_action: 'Forages for food',
group_id: 1,
group_name: 'Insects',
collection_id: 1,
collection_name: 'Animals'},
                {item_id: 1,
item_name: 'Gorilla',
item_action: 'Eats a banana',
group_id: 1,
group_name: 'Primates',
collection_id: 1,
collection_name: 'Animals'},
                {item_id: 1,
item_name: 'Worm',
item_action: 'Eats a banana',
group_id: 1,
group_name: 'Insects',
collection_id: 1,
collection_name: 'Animals'}];

var indexedTeams = [];
$scope.collectionName = $scope.items[0].collection_name;

$scope.itemsToFilter = function() {
    indexedItems = [];
    return $scope.items;
}

$scope.filterItems = function(item) {
    var itemIsNew = indexedItems.indexOf(item.group_name) == -1;
    if (itemIsNew) {
        indexedItems.push(item.group_name);
    }
    return itemIsNew;
}

}

Happy coding :)

Grouping retrieved data using the $resource service in AngularJS

1 Answers1