Using groupBy in angular repeater

Question

I have some JSON which I display in an angular repeater. I need to group the results in the repeater and I groupBy doesn't seem to work

Using this JSON...

{  
"Products":[  
  {  
     "Code":"ELA-67",
     "Site":"SITE1",
     "Attributes":{  
        "Term":"36",
        "quantity":1
     }
  },
  {  
     "Code":"ELI-45",
     "Site":"SITE2",
     "Attributes":{  
        "Term":"36",
        "quantity":1
     }
  },
  {  
     "Code":"COA-56",
     "Site":"SITE1",
     "Attributes":{  
        "Term":"36",
        "quantity":1
     }
  },
  {  
     "Code":"COY-67",
     "Site":"SITE2",
     "Attributes":{  
        "Term":"36",
        "quantity":1
     }
  }

] }

I want to create this layout

SITE1

• ELA-67
• COA-56

SITE2

• ELI-45
• COY-67

I was trying to use the groupBy function...

<div ng-repeat="Products in productAttributes.Products | groupBy: 'Products.Code'>
Product name: {{Products.Code}}
Site location: {{Products.Site}}
</div>

but I was getting an error below...

Error: error:unpr Unknown Provider Unknown provider: groupByFilterProvider

Any ideas?

Answer 1

Actually, you need to group the products by Site and not by Code :

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

demoApp.controller('DemoController', function ($scope) {

    $scope.productAttributes = {
        "Products": [{
            "Code": "ELA-67",
                "Site": "SITE1",
                "Attributes": {
                "Term": "36",
                    "quantity": 1
            }
        }, {
            "Code": "ELI-45",
                "Site": "SITE2",
                "Attributes": {
                "Term": "36",
                    "quantity": 1
            }
        }, {
            "Code": "COA-56",
                "Site": "SITE1",
                "Attributes": {
                "Term": "36",
                    "quantity": 1
            }
        }, {
            "Code": "COY-67",
                "Site": "SITE2",
                "Attributes": {
                "Term": "36",
                    "quantity": 1
            }
        }]
    };
});

<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.5.4/angular-filter.min.js"></script>
<div ng-app="demoApp" ng-controller="DemoController">
    <ul ng-repeat="(key, value) in productAttributes.Products | groupBy: 'Site'">{{ key }}
        <li ng-repeat="site in value">{{site.Code}}</li>
    </ul>
</div>

Answer 2

You need to include the 'angular-filter' module as a dependency in your module declaration, like this:

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

See the Getting Started section of the angular-filter module for more info.