How can I group data with an Angular filter

Question

I have a list of players which belong to a group each  How can I use a filter to list the users per group     name   Gene   team   team alpha      name   George   team   team beta      name   Steve   team   team gamma      name   Paula   team   team beta      name   Scruath of the 5th sector   team   team gamma       I m looking for this result    team alpha  Gene  team beta  George Paula  team gamma  Steve Scruath of the 5th sector

User · Answer

Both answers were good so I moved them in to a directive so that it is reusable and a second scope variable doesn't have to be defined.

Here is the fiddle if you want to see it implemented

Below is the directive:

var uniqueItems = function (data, key) {
    var result = [];
    for (var i = 0; i < data.length; i++) {
        var value = data[i][key];
        if (result.indexOf(value) == -1) {
            result.push(value);
        }
    }
    return result;
};

myApp.filter('groupBy',
            function () {
                return function (collection, key) {
                    if (collection === null) return;
                    return uniqueItems(collection, key);
        };
    });

Then it can be used as follows:

<div ng-repeat="team in players|groupBy:'team'">
    <b>{{team}}</b>
    <li ng-repeat="player in players | filter: {team: team}">{{player.name}}</li>        
</div>

User · Answer

Update I initially wrote this answer because the old version of the solution suggested by Ariel M  when combined with other  filters triggered an  quot Infite  diggest Loop Error quot   infdig   Fortunately this issue has been solved in the latest version of the angular filter  I suggested the following implementation  that didn t have that issue  angular module  quot sbrpr filters quot        filter  groupBy   function        var results         return function  data  key            if    data  amp  amp  key   return          var result          if  this  id               result              else              var scopeId   this  id              if  results scopeId                    results scopeId                      this  on  quot  destroy quot   function                         delete results scopeId                                                 result   results scopeId                      for var groupKey in result            result groupKey  splice 0 result groupKey  length            for  var i 0  i lt data length  i                  if   result data i  key                    result data i  key                   result data i  key   push data i                       var keys   Object keys result           for var k 0  k lt keys length  k               if result keys k   length   0              delete result keys k                      return result              However  this implementation will only work with versions prior to Angular 1 3   I will update this answer shortly providing a solution that works with all versions   I ve actually wrote a post about the steps that I took to develop this  filter  the problems that I encountered and the things that I learned from it

User · Answer

I originally used Plantface s answer  but I didn t like how the syntax looked in my view   I reworked it to use  q defer to post-process the data and return a list on unique teams  which is then uses as the filter   http   plnkr co edit waWv1donzEMdsNMlMHBa p preview  View   lt ul gt     lt li ng-repeat  team in teams  gt   team        lt ul gt         lt li ng-repeat  player in players   filter   team  team   gt   player name   lt  li gt        lt  ul gt     lt  li gt   lt  ul gt    Controller  app controller  MainCtrl   function  scope   q        scope players          omitted from SO for brevity       create a deferred object to be resolved later   var teamsDeferred    q defer          return a promise  The promise says   I promise that I ll give you your      data as soon as I have it  which is when I am resolved       scope teams   teamsDeferred promise        create a list of unique teams  unique   definition omitted from SO for brevity   var uniqueTeams   unique  scope players   team          resolve the deferred object with the unique teams      this will trigger an update on the view   teamsDeferred resolve uniqueTeams

User · Answer

In addition to the accepted answers above I created a generic  groupBy  filter using the underscore js library   JSFiddle  updated   http   jsfiddle net TD7t3   The filter  app filter  groupBy   function         return   memoize function items  field                return   groupBy items  field                          Note the  memoize  call  This underscore method caches the result of the function and stops angular from evaluating the filter expression every time  thus preventing angular from reaching the digest iterations limit   The html   lt ul gt       lt li ng-repeat   team  players  in teamPlayers   groupBy  team   gt            team            lt ul gt               lt li ng-repeat  player in players  gt                    player name                lt  li gt           lt  ul gt       lt  li gt   lt  ul gt    We apply our  groupBy  filter on the teamPlayers scope variable  on the  team  property  Our ng-repeat receives a combination of  key  values    that we can use in our following iterations   Update June 11th 2014 I expanded the group by filter to account for the use of expressions as the key  eg nested variables   The angular parse service comes in quite handy for this   The filter  with expression support   app filter  groupBy   function  parse        return   memoize function items  field            var getter    parse field           return   groupBy items  function item                return getter item                             The controller  with nested objects   app controller  homeCtrl   function  scope        var teamAlpha    name   team alpha        var teamBeta    name   team beta        var teamGamma    name   team gamma          scope teamPlayers     name   Gene   team  teamAlpha                          name   George   team  teamBeta                          name   Steve   team  teamGamma                          name   Paula   team  teamBeta                          name   Scruath of the 5th sector   team  teamGamma          The html  with sortBy expression    lt li ng-repeat   team  players  in teamPlayers   groupBy  team name   gt        team        lt ul gt           lt li ng-repeat  player in players  gt                player name            lt  li gt       lt  ul gt   lt  li gt    JSFiddle  http   jsfiddle net k7fgB 2

User · Answer

In addition to the accepted answer you can use this if you want to group by multiple columns    lt ul ng-repeat   key  value  in players   groupBy    team name    gt

User · Answer

You can use groupBy of angular filter module  so you can do something like this   JS    scope players        name   Gene   team   alpha       name   George   team   beta       name   Steve   team   gamma       name   Paula   team   beta       name   Scruath   team   gamma        HTML    lt ul ng-repeat   key  value  in players   groupBy   team   gt    Group name     key       lt li ng-repeat  player in value  gt      player     player name        lt  li gt   lt  ul gt    RESULT    Group name  alpha       player  Gene   Group name  beta       player  George       player  Paula   Group name  gamma       player  Steve       player  Scruath  UPDATE  jsbin Remember the basic requirements to use angular filter  specifically note you must add it to your module s dependencies       1  You can install angular-filter using 4 different methods          clone  amp  build this repository   via Bower  by running   bower install angular-filter from your terminal   via npm  by running   npm install angular-filter from your terminal   via cdnjs http   www cdnjs com libraries angular-filter          2  Include angular-filter js  or angular-filter min js  in your index html  after including Angular itself        3  Add  angular filter  to your main module s list of dependencies

User · Answer

First do a loop using a filter that will return only unique teams  and then a nested loop that returns all players per current team   http   jsfiddle net plantface L6cQN   html    lt div ng-app ng-controller  Main  gt       lt div ng-repeat  playerPerTeam in playersToFilter     filter filterTeams  gt           lt b gt   playerPerTeam team   lt  b gt           lt li ng-repeat  player in players   filter  team  playerPerTeam team   gt   player name   lt  li gt               lt  div gt   lt  div gt    script   function Main  scope         scope players     name   Gene   team   team alpha                         name   George   team   team beta                         name   Steve   team   team gamma                         name   Paula   team   team beta                         name   Scruath of the 5th sector   team   team gamma          var indexedTeams               this will reset the list of indexed teams each time the list is rendered again      scope playersToFilter   function             indexedTeams               return  scope players              scope filterTeams   function player            var teamIsNew   indexedTeams indexOf player team     -1          if  teamIsNew                indexedTeams push player team                     return teamIsNew

User · Answer

If you need that in js code  You can use  injected method of angula-filter lib   Like this   function controller  scope   http  groupByFilter             var groupedData   groupByFilter originalArray   groupPropName         https   github com a8m angular-filter wiki Common-Questions inject-filters

[javascript] How can I group data with an Angular filter?

Examples related to javascript

Examples related to filter

Examples related to angularjs

Examples related to grouping