ngRepeat by grouping the same property w/o another library

Question

I have a series of objects with properties, where some of them have the same value in a property called "region". I would like to group these objects by region property (i.e. if they are in the same region, then group them together), and display however many regions there are from these objects in different tables. I cannot figure out how to do this in ng-repeat. Here is an example of the list of objects:

[{"name": 000, "region": cus, "weight": 1}, {"name": 001, "region": cus, "weight": 2}, {"name": 003, "region": wus, "weight": 2}]

The goal is to do an ng-repeat on a table tag so that the tables are produced by regions "cus" and "wus," two tables with 000 and 001 in cus table and 002 in wus table.

For reasons which I will not explain here, I would prefer to not use another library for AngularJS to achieve this desired result. Many of you suggested a groupBy property that can be added but is there a way to do this with just the native Angular code?

Thanks much for the help.

ng-repeat="data.weight as data.name group by data.region for data in datas" — gr3g, Jul 23 '15 at 21:06
ng-repeat="item.setInValue as item.label group by item.whatever for item in items" — gr3g, Jul 23 '15 at 21:07
possible duplicate: http://stackoverflow.com/questions/14800862/how-can-i-group-data-with-an-angular-filter — csbarnes, Jul 23 '15 at 21:08

Thom-x · Answer 1 · 2015-07-23T21:30:25.897

angular.module('app',['angular.filter'])

function Main($scope) {
 var a = [{"name": 000, "region": 'cus', "weight": 1}, {"name": 001, "region": 'cus', "weight": 2}, {"name": 003, "region": 'wus', "weight": 2}]
    $scope.a = a;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>
<body ng-app="app" ng-controller="Main">
 <div ng-repeat="(key, value) in (a | groupBy: 'region')">
  Group name: {{ key }}
  <table>
   <tr>
    <th>name</td>
    <th>weight</td>
   </tr>
   <tr ng-repeat="item in value">
    <td>{{item.name}}</td>
    <td>{{item.weight}}</td>
   </tr>
  </table>
 </div>
</body>

Edit : I used filter | groupBy instead of lodash.

score 0 · Answer 2 · answered Jul 23 '15 at 21:27

You will need to transform initial array creating grouped version of it. This is pretty easy to do. For example:

$scope.regions = [{"name": "000", "region": "cus", "weight": 1}, {"name": "001", "region": "cus", "weight": 2}, {"name": "003", "region": "wus", "weight": 2}];

$scope.groupedRegions = $scope.regions.reduce(function(prev, curr) {
    if (!prev[curr.region]) prev[curr.region] = [];
    prev[curr.region].push(curr);
    return prev;
}, {});

and then render it:

<table ng-repeat="(key, value) in groupedRegions" class="table table-bordered">
    <tbody>
        <tr>
            <td>{{key}}</td>
            <td>
                <table>
                    <tbody>
                        <tr ng-repeat="region in value">
                            <td>{{region.name}}</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

Demo: http://plnkr.co/edit/JqJMjETsKeN2TIeczW5u?p=preview

ngRepeat by grouping the same property w/o another library

2 Answers2