Чтобы получить объекты JSON на основе текущей даты

Question

У меня есть JSON файл с именем tasks .it шаблон выглядит так:

JSON-файл

[
  {
    "taskName": "Task - 1",
    "id": "01",
    "startDate": "2019-04-17T18:30:00Z" <==========
  },
  {
    "taskName": "Task - 2",
    "id": "02",
    "startDate": "2019-04-22T14:30:00Z"
  },
  {
    "taskName": "Task - 3",
    "id": "03",
    "startDate": "2019-04-17T12:30:00Z" <========
  },
  {
    "taskName": "Task - 4",
    "id": "04",
    "startDate": "2019-04-25T18:10:00Z"
  }
]

Как и в JSON, у меня есть свойство с именем startDate, основанное на startDate. Я хочу отобразить задачи следующим образом:

Я пытался фильтровать по дате, как это:

HTML

<div class="cust-detail" *ngFor="let task of getTaskByDate(myDate)">
    <tr>
        <td>Task Name: </td>
        <td>{{task.taskName }}</td>
    </tr>   
</div>

TS

  tasks: ITasks;
  myDate = new Date();

  constructor(private myService: MyService) {}

  ngOnInit() {
    this.myService.getTasks()
      .subscribe(res => this.tasks = res);
  }


    public getTaskByDate (myDate: string): ITasks  {
    return this.tasks ? this.tasks.filter(x => x.startDate === myDate) : [];
  }

Что не так с моим подходом?Вот ДЕМО

Answer 1

В вашем html вы звоните let task of getTaskByDate(myDate), где myDate = new Date();, поэтому public getTaskByDate (myDate: string): ITasks будет public getTaskByDate (myDate: Date): ITasks

После этого сопоставить дату очень просто.

Первый метод (изменить правило фильтра) new Date(x.startDate).toDateString() === myDate.toDateString()

Второй метод:

public getTaskByDate (myDate: Date): ITask[]  {
      const dateString = myDate.toJSON().substr(0, 10);
      return this.tasks ? this.tasks.filter(x => x.startDate.substr(0, 10) === dateString) : [];
  }

Несмотря на вашу проблему, вы должны окончательно изменить имя интерфейса ITasks на ITask и задать для свойства AppComponent тип ITask[], поскольку это ложь. Он говорит, что ITasks определяет коллекцию Tasks вместо одного Task

Edit: Изменен тип myDate на Date. (getTaskByDate (myDate: string): ITasks до getTaskByDate (myDate: Date): ITask[], потому что myDate всегда был Date)

Answer 2

Ваш фильтр будет работать со следующим HTML

<h4>Today's Task</h4>
<div class="cust-detail" *ngFor="let task of getTaskByDate(myDate)">
    <tr>
        <td>Task Name: </td>
        <td>{{task.taskName }}</td>
    </tr>   
    <hr>
</div>

Если вы посмотрите ниже, вы увидите, что он фильтрует объекты и возвращает только объекты с myDate = new Date().toDateString(). toDateString() преобразует дату в строку типа 'Wed Apr 17 2019' без минут и секунд и так далее. Это позволит сравнить две строки и, возможно, будет не лучшим вариантом, но это обходной путь.

public getTaskByDate (myDate: string): ITasks  {
    return this.tasks ? this.tasks.filter(x => new Date(x.startDate).toDateString() === myDate) : [];
}

Я раздвоил твой стекблиц https://stackblitz.com/edit/angular-movie-read-load-json-sample-eg-muxfzr

Answer 3

Есть две вещи, о которых вы должны знать:

1. Свойство startDate имеет тип string, поэтому сравнение с Date не будет работать;сначала его необходимо преобразовать в правильный Date объект.
2. Ваш startDate включает время, поэтому его также необходимо учитывать.

Вотрешение с использованием библиотеки date-fns (которая поддерживает встряхивание дерева), фильтрация задач по дате (без учета времени):

• Установка Date-Fns с запуском npm i date-fns.
• Добавьте эти импорты в ваш файл TypeScript: import { addDays, parse, startOfDay } from 'date-fns';

public getTaskByDate (myDate: string): ITasks  {
  const date = parse(myDate);                    // parse input string
  const startOfSearch = startOfDay(date);        // start of the day
  const endOfSearch = addDays(startOfSearch, 1); // start of next day

  return this.tasks ? this.tasks.filter(x => {
    const parsedDate = parse(x.startDate);
    return parsedDate >= startOfSearch && parsedDate < endOfSearch;
  }) : [];
}

Вот решение без Date-Fns, опять же совпадающее только с датой:

public getTaskByDate (myDate: string): ITasks  {
  const date = Date.parse(myDate);               // parse input string

  return this.tasks 
    ? this.tasks.filter(x => Date.parse(x.startDate).toDateString() === date.toDateString()) 
    : [];
}