GroupBy与离子2约会 [英] GroupBy date with ionic 2

问题描述

在移动应用程序的这个视图中，我需要按日期对json api group返回的数据进行分组！
如何使用离子2
将数据json api与日期分组！
在移动应用程序的这个视图中，我需要按日期对json api组返回的数据进行分组！
如何使用离子2
将数据json api与日期分组！
Json API：

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>

推荐答案

你的数组有一些没有<$ c $的对象c> date 属性使这一点变得复杂，所以让我们从一个更简单的例子开始，其中一切都有 date 属性，如此

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"
  }
]

我们可以写一个 groupByDate 函数来处理基本情况

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));

我们可以通过编写一个更通用的 groupBy 函数，通过任何字符串值进行分组，使这更有用。

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.

这篇关于GroupBy与离子2约会的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！