Using angularjs filter and _.groupBy

Question

Here's a simple example I created to replicate my issue. In my controller, I have an array of people:

$scope.people = [
    { name: 'fred', age: 20 },
    { name: 'bob', age: 22 },
    { name: 'jane', age: 24 },
    { name: 'mary', age: 22 },
    { name: 'ben', age: 24 },
    { name: 'sarah', age: 21 },
];

I have a filter defined:

.filter('grouped', function () {
    return function (input) {
        return _.groupBy(input, 'age');
    }
})

You may notice that I'm using Lo-Dash to do the group by.

In my view I have a list defined:

<div class="list" ng-repeat="personGroup in people | grouped">
    {{ $index }}
    <div class="list" ng-repeat="person in personGroup">
        {{ person.name }}
    </div>
</div>

I get the result I'm after but I get a heap of errors in my developer console.

https://docs.angularjs.org/error/$rootScope/infdig?p0=10

I understand why I'm getting the error. This is explained in detail in the above link. I just don't know the proper way of achieving the result I'm after.

follow lodash.com/docs#groupBy for grouping and follow lodash.com/docs#filter if you are looking for filters.. I suspect the inputs are improper for groupby lo_dash function — Sandip
– Sandip, Commented Jun 16, 2014 at 13:19

Nikolas · Accepted Answer · 2014-06-16 13:21:06Z

2

As you are creating new Array-objects when grouping the people, I would not use a filter at all. The easiest solution would be to do the grouping inside your controller:

...
$scope.groups = _.groupBy($scope.people, 'age');
...

Your ng-repeat attribute would then read like:

ng-repeat="personGroup in groups"

answered Jun 16, 2014 at 13:21

Nikolas

1,1761 gold badge6 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Lydon Over a year ago

Thanks. I had considered the above method however I am planning to use similar filters to manipulate different kinds of data so I am after something that is more reusable and maintainable. That is why I am using a filter.

Nikolas Over a year ago

I really would not use a filter for that task. The purpose of a filter is to change some existing object (or existing objects inside an array). However, what you try to achieve is creating new objects (the item groups). I would rather to that inside the controller. If you want to create something more reusable you could create a new directive similar to ng-repeat but with the ability to group the items.

Lydon Over a year ago

Thanks. That's a good point. I have been looking around since posting this and seen similar questions, unresolved. You are right, I am trying to create a new object and this is the wrong way to go about it, since creating a new object is the core of the problem. You should post a response with an example directive if this is a good solution.

GonchuB · Accepted Answer · 2014-06-16 13:52:31Z

0

What version of angular are you using? I'm not getting any error:

http://plnkr.co/edit/bbDGjHWMGZx5GmNcggaw?p=preview

answered Jun 16, 2014 at 13:52

GonchuB

7055 silver badges8 bronze badges

1 Comment

Lydon Over a year ago

I'm using Angularjs v1.2.12 but there is still an error in your example. Angularjs gives up after a while to get out of an infinate loop. Open up the developer tools and view the console.

Collectives™ on Stack Overflow

Using angularjs filter and _.groupBy

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related