Question

在移动应用程序的这个视图中，我需要按日期对json api组返回的数据进行分组！如何使用离子2对数据json api进行分组！在移动应用程序的这个视图中，我需要按日期对json api组返回的数据进行分组！如何使用离子2对数据json api进行分组！ 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

你的数组中有一些没有date属性的对象会使这一点变得复杂，所以让我们从一个更简单的示例开始，其中所有内容都具有date属性，如此

[
  {
    "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函数

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[]});
}

这是一个片段（无类型）

＆＃13;

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

＆＃13;

我们可以通过编写一个更通用的groupBy函数来实现这一功能，该函数按任意string值进行分组。

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[]});

  });
}

如果你想在角度模板中使用它们，可以用最小的努力将这些中的任何一个制成管道。

GroupBy与离子2约会

1 个答案: