Ionic2, Angular2 - элементы сортировки по дате

Question

В настоящее время я работаю над приложением для управления тренировками. Я хотел бы сортировать тренировки по дате. Мой отчет о одной тренировке выглядит так:

"title": "Running through the park", 
    "type": "Running", 
    "distance": "10", 
    "duration": [ 
     { 
      "hours": "2" 
     }, 
     { 
      "minutes": "40" 
     }, 
     { 
      "seconds": "44" 
     } 
    ], 
    "note": "Running in NY park." 

Я хотел бы сортировать тренировки по дням. Например:

09,10

• работает

• баскетбол

07,10

• отжимания

• футбол

В настоящее время это выглядит следующим образом: workouts-main screen

Мой HTML файл для этого компонента прост:

<ion-list> 
<ion-item *ngFor="let workout of workouts" (click)="workoutSelected($event,workout)"> 
    {{workout.title}} 
</ion-item> 

Какой самый лучший способ сделать это ?

Answer 1

Поскольку я недавно споткнулся о подобной проблеме и не смог найти полностью удовлетворительный ответ, я хотел бы поделиться своим решением.

.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>