Групповые события по дате в Ionic 4 - PullRequest
Новая
       43

Групповые события по дате в Ionic 4

1 голос
/ 15 октября 2019

У меня проблема в Ionic 4, где я хочу упорядочить некоторые события по дате. Я прочитал, и кажется, что с трубами я могу добиться этого, но я не понимаю, как это работает.

Мой JSON выглядит так: 

"clasesDB": [
        {
            "estado": true,
            "_id": "5d9a90b21c9d440000c41909",
            "horaApertura": "2019-10-18T13:00:00.363Z",
            "horaCierre": "2019-10-18T14:00:00.363Z",

        },
        {
            "estado": true,
            "_id": "5d9adca55d091800171a7e27",
            "horaApertura": "2019-10-18T18:00:00.363Z",
            "horaCierre": "2019-10-18T19:00:00.363Z",

        },
        {
            "estado": true,
            "_id": "5d9adc9b5d091800171a7e26",
            "horaApertura": "2019-10-19T19:00:00.363Z",
            "horaCierre": "2019-10-19T20:00:00.363Z",

        }
]
}

Я хочу отфильтроватьих от "horaApertura", так что они могут быть примерно такими: 

+--------------+
+ 2019-10-18   +
+--------------+
| First event  |
| Secondevent  |
+--------------+
+ 2018-10-19   +
+--------------+
| Second event |
+--------------+
+ x date       |
+--------------+
| x    event   |
+--------------+

Можете ли вы, ребята, помочь мне, придумав, как я могу это сделать? Заранее спасибо!

1 Ответ

0 голосов
/ 15 октября 2019

Вы можете создать пользовательский канал для группировки по дате, используя метод redu () . 

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'groupByDate'})
export class GroupByDate implements PipeTransform {

  transform(array) {
    let result = clasesDB.reduce((acc, curr) => {
      let item = acc.find(item => item.date === curr.horaApertura);

      if (item) {
        item.events.push(curr);
      } else {
        acc.push({
          "date": curr.horaApertura,
          "events": [curr]
        });
      }

      return acc;
    }, []); 

    return result;
  } 
}

Включить этот канал как объявление в модуль.

И используйте его в своем шаблоне, как показано ниже: 

<div *ngFor="let item of classesDB | groupByDate">
  <div>{{ item.date }}</div>
  <div *ngFor="let event of item.events>{{ event }}</div>
</div>

Живой пример группировки по дате: 

var clasesDB = [{ "estado": true, "_id": "5d9a90b21c9d440000c41909", "horaApertura": "2019-10-18T13:00:00.363Z", "horaCierre": "2019-10-18T14:00:00.363Z",

 }, { "estado": true, "_id": "5d9adca55d091800171a7e27", "horaApertura": "2019-10-18T18:00:00.363Z", "horaCierre": "2019-10-18T19:00:00.363Z",

 }, { "estado": true, "_id": "5d9adc9b5d091800171a7e26", "horaApertura": "2019-10-19T19:00:00.363Z", "horaCierre": "2019-10-19T20:00:00.363Z",

 },
 { "estado": true, "_id": "5d9adc9b5d091800171a7e28", "horaApertura": "2019-10-19T19:00:00.363Z", "horaCierre": "2019-10-19T20:00:00.363Z",

 } ];

let result = clasesDB.reduce((acc, curr) => {
  let item = acc.find(item => item.date === curr.horaApertura);

  if (item) {
    item.events.push(curr);
  } else {
    acc.push({
      "date": curr.horaApertura,
      "events": [curr]
    });
  }

  return acc;
}, []);

console.log(result);
...