GroupBy date with ionic 2 - json

Question

In this view of the mobile application I need to group the data that are returned by json api group by date !!
how to groupby date the data json api with ionic 2
!
In this view of the mobile application I need to group the data that are returned by json api group by date !!
how to groupby date the data json api with ionic 2
!
Json API :
course_cheval: [
{
CourseHasCheval: {
id: "1461",
course_id: "460",
cheval_id: "90",
rang: "2",
temps: "TETE",
jockey_id: "30",
poids: "57",
part_jokey: "367.000",
entraineur_id: "6",
part_entraineur: "440.000",
propritaire: "GHARBI. MED",
part_propritaire: "4400.000",
eleveur_id: "47",
part_eleveur: "2200.000"
},
Course: {
id: "460",
date: "2012-06-24",
nom_du_prix: "GODOLPHIN ARABIAN",
allocation: "20000",
hippodrome_id: "2",
jouree: "36",
categorie_id: "1",
distance: "1600",
},
{
CourseHasCheval: {
id: "1412",
course_id: "445",
cheval_id: "90",
rang: "1",
temps: "1.53''8/10",
jockey_id: "3",
poids: "56",
part_jokey: "660.000",
entraineur_id: "6",
part_entraineur: "660.000",
propritaire: "GHARBI. MED",
part_propritaire: "6600.000",
eleveur_id: "47",
part_eleveur: "3300.000"
},
Course: {
id: "445",
date: "2012-10-21",
nom_du_prix: "RIDHA BEN EZZEDINE",
allocation: "12000",
hippodrome_id: "2",
jouree: "49",
categorie_id: "2",
distance: "1600",
nbre_partant: "9",
}
}]
<ion-grid *ngSwitchCase="'Compteurs'">
<ion-row *ngFor="let m of members ">
<ion-col width-20 >
{{m.Course.date | date : "yyyy"}}
</ion-col>
<ion-col width-30>
{{m.Course.nom_du_prix}}
</ion-col>
<ion-col width-20>
GR.{{m.Course.categorie_id}}
</ion-col>
<ion-col width-30>
{{m.Course.allocation}}
</ion-col>
</ion-row>

Answer 1

Your array has some objects without a date property which complicates this slightly so lets start with a simpler example where everything has a date property like so
[
{
"name": "Philosophy 212: Ethics and Applications",
"date": "2007-12-12"
},
{
"name": "JavaScript Fundamentals",
"date": "2007-12-12"
},
{
"name": "Math 364: Linear Algebra",
"date": "2017-01-15"
}
]
We can write a groupByDate function that handles the basic case
function groupByDate<T extends {date: string}>(datedValues: T[]) {
return datedValues.reduce((groups, dated) => {
const key = dated.date;
if (groups[key]) {
groups[key].push(dated);
} else {
groups[key] = [dated];
}
return groups;
}, {} as {[key string]: T[]});
}
Here it is in a snippet (sans types)
var courses = [
{
"name": "Philosophy 212: Ethics and Applications",
"date": "2007-12-12"
},
{
"name": "JavaScript Fundamentals",
"date": "2007-12-12"
},
{
"name": "Math 364: Linear Algebra",
"date": "2017-01-15"
}
];
function groupByDate(datedValues) {
return datedValues.reduce((groups, dated) => {
const key = dated.date;
if (groups[key]) {
groups[key].push(dated);
} else {
groups[key] = [dated];
}
return groups;
}, {});
}
console.log(groupByDate(courses));
we can make this much more useful with by writing a more generic groupBy function that groups by any string value.
function groupBy<T>(values: T[], keyOrKeySelector: keyof T | ((value: T) => string)) {
return values.reduce((groups, value) => {
const key = typeof keySelector === 'function'
? keyOrKeySelector(value)
: value[keyOrKeySelector];
if (groups[key]) {
groups[key].push(value);
} else {
groups[key] = [value];
}
return groups;
}, {} as {[key string]: T[]});
});
}
Either of these can be made into a pipe with minimal effort if you want to use them inside of an angular template.