CODEWITHSUNDEEP
javascriptjsonangularjs
Mr.Mark
Mr.Mark

Reputation: 97

How to create markers to group AngularJS ng-repeat output by date (month)?

For a project I'm doing I'm outputting an array of data using ng-repeat from AngularJS and am trying to group the output by Month. There's no need to orderBy, since the data I get is already sorted, I just need to group it by Month.

The data I get from the API looks similar like this:

{"userinfo": [{
    "date": "1305838800000",
    "name": "john",
    "lastname": "dough",
    "city": "",
    "province": "noord-holland",
    "device": "macbook",
    "phone": "iphone",
    "provider": "t-mobile"
}, {
    "date": "1305838800000",
    "name": "john",
    "lastname": "",
    "city": "amsterdam",
    "province": "noord-holland",
    "device": "macbook",
    "phone": "iphone",
    "provider": "vodafone"
},{
    "date": "1305838800000",
    "name": "john",
    "lastname": "",
    "city": "amsterdam",
    "province": "noord-holland",
    "device": "macbook",
    "phone": "iphone",
    "provider": "t-mobile"
}, {
    "date": "1305838800000",
    "name": "john",
    "lastname": "",
    "city": "amsterdam",
    "province": "noord-holland",
    "device": "macbook",
    "phone": "iphone",
    "provider": "vodafone"
}]}

In here the field field would be the epoch date of the date I want to group by.

Any help on this grouping matter would be appreciated.

Upvotes: 3

Views: 771

Answers (2)

Alexey Lapusta
Alexey Lapusta

Reputation: 46

While this functionality will not land in AngularJS core:

https://github.com/angular/angular.js/issues/1649

You can either go with re-grouping an array into a map object on scope (Underscore.JS's groupBy is a nice example) or creating a new groupBy filter/use existing ones like:

https://github.com/samstokes/ng-group/

One plus for regrouping on scope - it will only happen once, while filters are re-evaluated on each digest.

Upvotes: 2

Josip Filipović
Josip Filipović

Reputation: 148

There's no support for this kind of grouping in built-in angular directives. You'll need to create a copy of your model that you get from the server (a new collection), "manually" group the objects in the according months (by date) and then loop over that copy (in the view by using ng-repeat) instead of looping over the original model.

Upvotes: 0

Related Questions