I currently have a selection of objects on display along with their corresponding information. I am using ng-repeat to showcase all the objects, and now I am interested in implementing a filter or function to group the objects by month. If there are multiple objects registered in the same month, I would like to display all those objects together under that specific month
Below is my JSON Array, where the value "upload_date" indicates the month I want to extract
"_embedded": {
"incidents": [
{
"id": 20,
"name": "Incident Name",
"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"
}
}
Here is my HTML code utilizing ng-repeat, which is functioning correctly
<ul class="list" >
<h1>January</h1><br />**<---- HERE I WOULD LIKE TO SHOW THE MONTH**
<br />
<li class="list__item" ng-repeat="incident in incidents">
<a href="#" data-toggle="modal" data-target="#incidentModal" ng-click="selectIncident($index)">
<figure class="list__item__inner">
<div class="badges">
<span class="glyphicon glyphicon glyphicon-comment"><span> {{incident._embedded.commentsCount}} </span>
<span class="glyphicon glyphicon glyphicon-picture"><span> {{incident._embedded.attachmentsCount}} </span>
</div>
<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>
<p>{{incident.description | strLimit: 90 }}</p>
<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>
<p> <span class="glyphicon glyphicon-user"></span> {{incident._embedded.employee}}</p>
</figcaption>
</figure>
</a>
</li>
</ul>
My goal is to arrange all recorded objects neatly categorized by month. If there are no objects within a particular month, that month should not be displayed. However, I am uncertain about how to effectively group the objects by month