angular filter - group by object (or multiple fields)

Question

I extended the Angular filter group by example to the following by transforming the team to an object.

     var app = angular.module('myApp',['angular.filter']);

app.controller('MainController', ['$scope', function($scope){
  $scope.players = [
  {
    name: 'Gene', 
    team: {
      'id' : '1',
      'name' : 'alpha'
      
    }
  },
  {
    name: 'George', 
    team: {
      'id' : '2',
      'name' : 'beta'
    }
  },
  {
    name: 'Steve', 
    team: {
      'id' : '3',
      'name' : 'gamma'
    }
  },
  {
    name: 'Paula', 
    team: {
      'id' : '2',
      'name' : 'beta'
    }
  },
  {
    name: 'Scruath', 
    team: {
      'id' : '3',
      'name' : 'gamma'
    }
  }
];
}]);

<!DOCTYPE html>
<html>

  <head>
    <script data-require="[email protected]" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
    <script data-require="angular-filter@*" data-semver="0.5.7" src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.7/angular-filter.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myApp">
    <div ng-controller="MainController">
      <ul>
        <li ng-repeat="(team, players) in players | groupBy: 'team.name'">
          <a href="#I need the team ID">Group name: {{ team }}</a>
          <ul>
            <li ng-repeat="player in players">
              player: {{ player.name }}
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </body>

</html>

But, what if I need the team id in the group by? What can I do?

<a href="#I need the team ID">Group name: {{ team }}</a>

I tried to group by the team object and use team.name and team.id but it didn't work. Also, I didn't know how to create a group by with multiple fields (team.id, team.name)

Here's a working plnkr

after groupBy, you will probably have two different team id of the same group name, is this all right? — Pengyy
– Pengyy, Commented Apr 3, 2017 at 7:33
@Pengyy when I group by team, I will have 1 id and 1 name for a team. And 1 team having multiple players — EddyG
– EddyG, Commented Apr 3, 2017 at 7:36
Haha eddy, an other questions of you. And same as all time, wrong approach results in error =) — lin
– lin, Commented Apr 3, 2017 at 7:44
@lin What's wrong now? When I have a team name I need a link to click on it to see the team details, so to reach it I need the team id in the link. Solve it :p — EddyG
– EddyG, Commented Apr 3, 2017 at 7:46
Its not possible, due to your data format. It doesnt make sense. You group by name but e.g. team name "gamma" has 2 different IDs. — lin
– lin, Commented Apr 3, 2017 at 7:49

EddyG · Accepted Answer · 2017-04-03 08:37:56Z

I have a simple solution:

I grouped by team.id

<li ng-repeat="(teamid, players) in players | groupBy: 'team.id'">

Then I used: players[0].team.name within the group

<li ng-repeat="(teamid, players) in players | groupBy: 'team.id'">
    <a href="#Here I can use the group teamid">Group name: {{ players[0].team.name }}</a>
      <ul>
        <li ng-repeat="player in players">
          player: {{ player.name }}
        </li>
     </ul>
</li>

Since players in each group are only the players belonging to this group where all of them have the same team, so players[0], players[1] and so on will have the same team name.

     var app = angular.module('myApp',['angular.filter']);

app.controller('MainController', ['$scope', function($scope){
  $scope.players = [
  {
    name: 'Gene', 
    team: {
      'id' : '1',
      'name' : 'alpha'
      
    }
  },
  {
    name: 'George', 
    team: {
      'id' : '2',
      'name' : 'beta'
    }
  },
  {
    name: 'Steve', 
    team: {
      'id' : '3',
      'name' : 'gamma'
    }
  },
  {
    name: 'Paula', 
    team: {
      'id' : '2',
      'name' : 'beta'
    }
  },
  {
    name: 'Scruath', 
    team: {
      'id' : '3',
      'name' : 'gamma'
    }
  }
];
}]);

<!DOCTYPE html>
<html>

  <head>
    <script data-require="[email protected]" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
    <script data-require="angular-filter@*" data-semver="0.5.7" src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.7/angular-filter.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myApp">
    <div ng-controller="MainController">
      <ul>
        <li ng-repeat="(teamid, players) in players | groupBy: 'team.id'">
          <a href="#Here I can use the group teamid">Group name: {{ players[0].team.name }}</a>
          <ul>
            <li ng-repeat="player in players">
              player: {{ player.name }}
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </body>

</html>

lin · Accepted Answer · 2017-04-03 08:01:10Z

You should group by team.id because a team name is not unique. In that way you avoid a wrong data output. Ok, well. I was able to solve your problem by pre-collecting your team in the controller and normalize them by team.idin a seperate object - demo fiddle:

View

<body ng-app="myApp">
<div ng-controller="MainController">
    <ul>
        <li ng-repeat="(team, players) in players | groupBy: 'team.id'">
            <a href="{{ team }} ">Group name: {{ teams[team].name }}</a>
            <ul>
                <li ng-repeat="player in players">
                    player: {{ player.name }}
                </li>
            </ul>
        </li>
    </ul>
</div>
</body>

AngularJS Application

var app = angular.module('myApp',['angular.filter']);

app.controller('MainController', ['$scope', function($scope){

    $scope.players = [
        {
            name: 'Gene',
            team: {
                'id' : '1',
                'name' : 'alpha'

            }
        }, {
            name: 'George',
            team: {
                'id' : '2',
                'name' : 'beta'
            }
        }, {
            name: 'Steve',
            team: {
                'id' : '3',
                'name' : 'gamma'
            }
        }, {
            name: 'Paula',
            team: {
                'id' : '4',
                'name' : 'beta'
            }
        }, {
            name: 'Scruath',
            team: {
                'id' : '5',
                'name' : 'gamma'
            }
        }];

    $scope.teams = {};

    $scope.players.forEach(function (player) {
        if (angular.isUndefined($scope.teams[player.team.id])) {
            $scope.teams[player.team.id] = player.team;
        }
    });
}]);

Collectives™ on Stack Overflow

angular filter - group by object (or multiple fields)

2 Answers 2

Comments

View

AngularJS Application

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

View

AngularJS Application

Comments

Your Answer

Sign up or log in

Post as a guest

Related