Как показать данные JSON по дате в React Native

Question

У меня есть данные json по датам, я хочу показать расписание на сегодня. Как это можно реализовать? Адрес json-файла: https://volnaveri.by/tt.json

react native code:

import React, { Component } from 'react';
import { ActivityIndicator, FlatList, Text, View } from 'react-native';

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      data: [],
      isLoading: true
    };
  }

  async getMovies() {
    try {
      const response = await fetch('https://volnaveri.by/tt.json');
      const json = await response.json();
      this.setState({ data: json.times });
    } catch (error) {
      console.log(error);
    } finally {
      this.setState({ isLoading: false });
    }
  }

  componentDidMount() {
    this.getMovies();
  }

  render() {
    const { data, isLoading } = this.state;

    return (
      <View style={{ flex: 1, padding: 24 }}>
        {isLoading ? <ActivityIndicator/> : (
          <FlatList
            data={data}
            keyExtractor={({ id }, index) => id}
            renderItem={({ item }) => (
              <Text>{item.Date}, {item.Monday}, {item.Tuesday}, {item.Monday}, {item.Wednesday}, {item.Thursday}</Text>
            )}
          />
        )}
      </View>
    );
  }
};

Answer 1

Не знаю, с чем вы тут не справились. Возможно, с датами не разобрались, про даты в JavaScript можно почитать тут https://learn.javascript.ru/datetime

import React, { Component } from 'react';
import { ActivityIndicator, FlatList, Text, View } from 'react-native';

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      data: [],
      isLoading: true,
      item: null
    };
  }

  async getMovies() {
    try {
      const now = new Date() //сегодняшняя дата
      let month = String(now.getMonth() + 1) //месяца в js c 0, а у вас с 1, поэтому +1, приводим к строке, чтобы посмотреть длину
      if (month.length === 1) month = '0' + month  //добавляем 0 в начало, если его нет
      const today = `${now.getFullYear()}-${month}-${now.getDate()}` //форматируем дату, как в файле
      const response = await fetch('https://volnaveri.by/tt.json');
      const json = await response.json();
      this.setState({ data: json.times, item: json.times.find(day => day.Date === today)}); //ищем сегоднящний день
    } catch (error) {
      console.log(error);
    } finally {
      this.setState({ isLoading: false });
    }
  }

  componentDidMount() {
    this.getMovies();
  }

  render() {
    const { item, isLoading } = this.state;

    return (
      <View style={{ flex: 1, padding: 24 }}>
        {isLoading ? <ActivityIndicator/> : (<Text>{item.Date}, {item.Monday}, {item.Tuesday}, {item.Monday}, {item.Wednesday}, {item.Thursday}</Text>)}
      </View>
    );
  }
};

Вы также можете приводить строку к дате new Date(day.Date) и сравнивать даты, только в этом случае во-первых от сегодняшний даты вам надо будет отбросить часы и всё, что мельче, во-вторых если в вашем файле окажется некорректная дата, данный код new Date(day.Date) может вызвать ошибку в некоторых браузерах, а в-третьих, аккуратнее с часовыми поясами. Из-за всех этих нюансов, я когда сравниваю даты, привожу их к строке всегда.

Если не гарантируется, что сегодняшняя дата есть в файле, вставьте дополнительную проверку

БЛОГ НА HUSL

Как показать данные JSON по дате в React Native

Ответы (1 шт):