Ionic2,Angular2 - sorting elements by date - json

Question

currently I am working on app for managing workouts. I would like to sort workouts by date. My record of one workout looks like that:
"title": "Running through the park",
"type": "Running",
"distance": "10",
"duration": [
{
"hours": "2"
},
{
"minutes": "40"
},
{
"seconds": "44"
}
],
"note": "Running in NY park."
I would like to sort workouts by the day. For example:
09.10
running
basketball
07.10
push-ups
football
Currently it looks like that: workouts-main screen
My html file for that component is simple :
<ion-list>
<ion-item *ngFor="let workout of workouts" (click)="workoutSelected($event,workout)">
{{workout.title}}
</ion-item>
What's the best way to do that?

Answer 1

As I stumbled recently on similar issue and couldn't find fully satisfactory answer I would like to share my solution.
.ts
objectEntries: any[];
groupedObjectEntries: any[];
ionViewDidLoad() {
// put in the line below your custom function for getting data into objectEntries object
.....
this.groupObjectEntries(this.objectEntries);
}
groupObjectEntries(objectEntries){
var currentDate: any;
var currentObjectEntries = [];
var output = [];
// sort descending
let sortedObjectEntries =objectEntries.sort(function (a, b) {
var key1 = new Date(a.date);
var key2 = new Date(b.date);
if (key1 < key2) {
return 1;
} else if (key1 == key2) {
return 0;
} else {
return -1;
}
});
sortedObjectEntries.forEach((item, index) => {
// conversion from JSON format
var itemDate = new (item.date);
itemDate.setHours(0,0,0,0);
if(itemDate != currentDate){
currentDate = itemDate;
let newGroup = {
groupDate: currentDate,
objectEntries: []
};
currentObjectEntries = newGroup.objectEntries;
output.push(newGroup);
}
currentObjectEntries.push(item);
});
this.groupedObjectEntries = output;
}
.html
<ion-content>
<ion-item-group *ngFor="let group of groupedObjectEntries">
<ion-item-divider sticky>
<ion-item color="gray" ><h4>{{ group.groupDate | date:'fullDate' }} </h4> </ion-item>
</ion-item-divider>
<button ion-item *ngFor="let item of group.objectEntries" (click)="itemSelected(item)">
<h3>{{ item.field1 }} </h3>
<p>{{ item.field2 }}</p>
</button>
</ion-item-group>
</ion-content>