How can I group data with an Angular ng-repeat?

Question

I have a set of objects on display with the information about that object. I use ng-repeat to show all the objects, but I would now like to implement a filter or function, group objects by month, if i have objects registered in the same month, to show in my index all of the objects with that month

this is my JSON Array, with the value " upload_date " is where I would like to get the specific month

"_embedded": {
    "incidents": [
        {
            "id": 20,
            "name": "Nombre de incidente",
            "description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
            "timestamp": "2015-03-13T00:00:00-0600",
            "upload_date": "2015-03-31T23:58:19-0600",
            "archived": false,
            "_links": {
                "self": {
                    "href": "http://incidents-core/app_dev.php/incidents/20"
                },
                "attachments": {
                    "href": "http://incidents-core/app_dev.php/incidents/20/attachments"
                },
                "comments": {
                    "href": "http://incidents-core/app_dev.php/incidents/20/comments"
                }
            }

and here is my html code with ng-repeat, this works

<ul class="list" >
               <h1>January</h1><br />**<---- HERE I WOULD LIKE THO SHOW THE MONTH**
               <br />
                <li class="list__item" ng-repeat="incident in incidents">
                    <!-- ngrepeat: mostrar total de incidentes-->
                    <a href="#" data-toggle="modal" data-target="#incidentModal" ng-click="selectIncident($index)">
                        <!-- /.badgetSection-->
                        <figure class="list__item__inner">
                            <div class="bagdets">
                                <span class="glyphicon glyphicon glyphicon-comment"><span> {{incident._embedded.commentsCount}} </span>
                                <span class="glyphicon glyphicon glyphicon-picture"><span> {{incident._embedded.attachmentsCount}} </span>
                            </div>
                            <!-- ./badges -->
                            <div class="incident-image">
                                <img ng-src="{{incident._links.thumbnail.href || 'img/03.jpg'}}">
                                <p class="incident-type"><span>{{incident._embedded.incident_type}}</span>
                                </p>
                            </div>
                            <figcaption>
                                <p>{{incident.name}}</p>
                                <div class="line-separator"></div>
                                <p>{{incident.description | strLimit: 90 }}</p>
                                <div class="line-separator"></div>
                                <p><span class="glyphicon glyphicon-calendar"></span> {{incident.timestamp | date:'EEE - dd/mm/yyyy'}} <span class="glyphicon glyphicon-time"></span> {{incident.timestamp | date:'hh:mm:ss a'}}</p>
                                <div class="line-separator"></div>
                                <p> <span class="glyphicon glyphicon-user"></span> {{incident._embedded.employee}}</p>
                            </figcaption>
                        </figure>
                    </a>
                </li>
            </ul>

My idea is to try and show all registered objects sorted by month , if there are no objects in that month , just do not show the month. But I don't know how can I grouping by months

Since dates will never be equal (negating using groupBy filter) I think your best bet is map the data into months array yourself ..and the incidents would be children of months. Can use a temp object with months as keys for first stage of mapping or a library like lodash or underscore to help you — charlietfl, May 04 '15 at 18:39
Why dont you do one request getting only the month you want? like... request?formdate=xx/xx/xxxx&todate=xx/xx/xxxx — Bruno Gomes, May 04 '15 at 19:09
@BrunoGomes but if i want 12 months, i think is not good idea make a 12 requests, i was thinking in the ng-if — , May 04 '15 at 19:32
@DaniilkaSterbend Look this thread its looks like your question. :) http://stackoverflow.com/questions/14800862/how-can-i-group-data-with-an-angular-filter — Bruno Gomes, May 04 '15 at 19:40

score 1 · Answer 1 · answered May 05 '15 at 05:43

1

check this angular-filter which provides so many options https://github.com/a8m/angular-filter

answered May 05 '15 at 05:43

iDeekshith

433
3
9

score 0 · Answer 2 · answered May 04 '15 at 19:43

0

What your are looking for is to perform an automatic list divider.

See that nice exemple for more information : http://mcgivery.com/dividing-list-automatically-ionic-framework/

answered May 04 '15 at 19:43

aorfevre

5,034
3
21
51

I never used IONIC but i will check maybe is more easy, thanks – May 04 '15 at 20:11
Ionic is just a framework for building phone apps in AngularJS. The mechnaic with directives stay the same. – aorfevre May 04 '15 at 20:12

How can I group data with an Angular ng-repeat?

2 Answers2