How to group items by month in ionic 2? - group-by

Question

I have a data collection that i want to group by month for a calendar list view with dividers like the attached image. How to do this in ionic 2?
{
"data": [
{
"id": "75",
"title": "Oudergesprekken",
"startDate": "18-01-2017",
},
{
"id": "76",
"title": "Talentmiddag",te ontdekken.</p>",
"startDate": "25-01-2017",
},
{
"id": "77",
"title": "Studiedag team, alle kinderen vrij!",
"startDate": "06-02-2017",
},
{
"id": "79",
"title": "Letterfeest groep 3",
"startDate": "14-02-2017",
},
{
"id": "78",
"title": "Voorjaarsvakantie",
"startDate": "24-02-2017",
}
]
At the moment i have an filter pipe
#Pipe({
name: "filter",
pure: false
})
export class ArrayFilterPipe implements PipeTransform {
transform(items: Array<any>, conditions: {[field: string]: any}): Array<any> {
return items.filter(item => {
for (let field in conditions) {
if (item[field] !== conditions[field]) {
return false;
}
}
return true;
});
}
}
and in the template ill do this.
<ion-item-group *ngFor="let maand of maanden" >
<ion-item-divider sticky>{{maand.title}}</ion-item-divider>
<ion-item *ngFor="let item of agendaItems | filter:{ maandNum:maand.id }" >
{{ item.title }}
</ion-item>
</ion-item-group>
The pipe groups the items with an months array that's works fine but shows dividers of months with no have any data and if there are items that are in 2 different years in the same month this group by not working propaly.

Answer 1

I'd like to have usefull data when programming in front-end. There are a few ways to handle the data you recieved. In my opinion it's the easiest way to manipulate the data you've got, so you are able to iterate through that month array, like following :
Your component
export class YourComponent {
public months: any = [];
public data: any = [];
constructor() {
this.data = [
{
'id': '75',
'title': 'Oudergesprekken',
'startDate': '18-01-2017',
},
{
'id': '76',
'title': 'Talentmiddag,te ontdekken.</p>',
'startDate': '25-01-2017',
},
{
'id': '77',
'title': 'Studiedag team, alle kinderen vrij!',
'startDate': '06-02-2017',
},
{
'id': '79',
'title': 'Letterfeest groep 3',
'startDate': '14-02-2017',
},
{
'id': '78',
'title': 'Voorjaarsvakantie',
'startDate': '24-02-2017',
}
];
}
ngOnInit() {
this.data.forEach( (event) => {
let monthNumber = this.getMonthNumber(event);
if (this.months[monthNumber] === null||undefined ) this.months[monthNumber].events = [];
this.months[monthNumber].events.push(event);
});
}
private getMonthNumber(event: any): number {
return event.startDate.split('-')[1];
}
public getMonthName(monthNumber: any): number {
let maanden = [ {"id": 1, "title": "Januari"}, {"id": 2, "title": "Februari"}, {"id": 3, "title": "Maart"}, {"id": 4, "title": "April"}, {"id": 5, "title": "Mei"}, {"id": 6, "title": "Juni"}, {"id": 7, "title": "Juli"}, ...... ];
maanden.forEach((maand) => {
if ( maand.id === monthNumber) return maand.title;
});
}
}
Your HTML
<ion-item-group *ngFor="let month of months" >
<ion-item-divider sticky *ngIf='month.events.length > 0'>{{getMonthName()}}</ion-item-divider>
<ion-item *ngFor="let event of month.events | filter:{ maandNum:months.indexOf(month) }" >
{{ item.title }}
</ion-item>
</ion-item-group>
I did not test this, so I'll keep an eye on this one. How this make some clear.