從 json 文件中過濾數組

Question

我正在使用 reactjs 並且我在 json 文件中有一個數組。 我需要過濾這個數組，我試圖在 selectYear function 中做一個過濾器（date.filter），但返回這個錯誤：

嘗試導入錯誤：“過濾器”未從“../teste_arvore_data.json”導出（導入為“日期”）。

我的代碼：

import React from 'react';
import * as date from '../teste_arvore_data.json';

class Table extends React.Component {
  selectYear(yr) {
    const dataFiltered = date.filter((date) => date.date.prototype.getFullYear() === yr);
    return dataFiltered;
  }

  render() {
    return (
      <div>
      <table>
        <thead>
          <tr>
            <th colspan="2">Jan</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>{date[0].date}</td>
            <td>2</td>
          </tr>
        </tbody>
      </table>
    </div>
    )
  }
}

export default Table;

json結構：

[{"date":"2016-10-12","count":14},{"date":"2016-10-13","count":44},{"date":"2016-10-14","count":50},{"date":"2016-10-15","count":48},{"date":"2016-10-16","count":34},{"date":"2016-10-17","count":9},{"date":"2016-10-18","count":21},{"date":"2016-10-20","count":12},{"date":"2016-10-21","count":19},{"date":"2016-10-23","count":49},{"date":"2016-10-25","count":50},{"date":"2016-10-30","count":35},{"date":"2016-10-31","count":50},{"date":"2016-11-01","count":7},{"date":"2016-11-02","count":24},{"date":"2016-11-03","count":41},{"date":"2016-11-04","count":31},{"date":"2016-11-06","count":17},{"date":"2016-11-07","count":31},{"date":"2016-11-08","count":2},{"date":"2016-11-09","count":14},{"date":"2016-11-11","count":24},{"date":"2016-11-12","count":28},{"date":"2016-11-13","count":8},{"date":"2016-11-15","count":32},{"date":"2016-11-16","count":24},{"date":"2016-11-18","count":17},{"date":"2016-11-19","count":40},{"date":"2016-11-20","count":19},{"date":"2016-11-23","count":11},{"date":"2016-11-24","count":27},{"date":"2016-11-26","count":2},{"date":"2016-11-28","count":17},{"date":"2016-12-02","count":8},{"date":"2016-12-04","count":26},{"date":"2016-12-05","count":16},{"date":"2016-12-07","count":44},{"date":"2016-12-08","count":42},{"date":"2016-12-09","count":39},{"date":"2016-12-10","count":36},{"date":"2016-12-11","count":9},{"date":"2016-12-12","count":3},{"date":"2016-12-13","count":39},{"date":"2016-12-14","count":4},{"date":"2016-12-15","count":17},{"date":"2016-12-17","count":32},{"date":"2016-12-18","count":39},{"date":"2016-12-19","count":46},{"date":"2016-12-20","count":2},{"date":"2016-12-21","count":12},{"date":"2016-12-22","count":4},{"date":"2016-12-23","count":1},{"date":"2016-12-24","count":9},{"date":"2016-12-25","count":43},{"date":"2016-12-26","count":2},{"date":"2016-12-27","count":10},{"date":"2016-12-28","count":12},{"date":"2016-12-30","count":45},{"date":"2017-01-01","count":31},{"date":"2017-01-02","count":5},{"date":"2017-01-03","count":47},{"date":"2017-01-05","count":8},{"date":"2017-01-07","count":1},{"date":"2017-01-09","count":36},{"date":"2017-01-10","count":30},{"date":"2017-01-12","count":27},{"date":"2017-01-13","count":32},{"date":"2017-01-16","count":38},{"date":"2017-01-17","count":20},{"date":"2017-01-18","count":38},{"date":"2017-01-20","count":2},{"date":"2017-01-21","count":2},{"date":"2017-01-22","count":18},{"date":"2017-01-23","count":37},{"date":"2017-01-24","count":37},{"date":"2017-01-25","count":15},{"date":"2017-01-26","count":30},{"date":"2017-01-27","count":10},{"date":"2017-01-28","count":37},{"date":"2017-01-31","count":9},{"date":"2017-02-02","count":39},{"date":"2017-02-04","count":13},{"date":"2017-02-05","count":39},{"date":"2017-02-07","count":22},{"date":"2017-02-08","count":27},{"date":"2017-02-10","count":33},{"date":"2017-02-12","count":6},{"date":"2017-02-13","count":10},{"date":"2017-02-14","count":44},{"date":"2017-02-15","count":47},{"date":"2017-02-17","count":27},{"date":"2017-02-18","count":28},{"date":"2017-02-19","count":26},{"date":"2017-02-20","count":12},{"date":"2017-02-23","count":20},{"date":"2017-02-24","count":46},{"date":"2017-02-25","count":37},{"date":"2017-02-27","count":37},{"date":"2017-03-01","count":6},{"date":"2017-03-02","count":30},{"date":"2017-03-04","count":1},{"date":"2017-03-07","count":49},{"date":"2017-03-10","count":22},{"date":"2017-03-11","count":16},{"date":"2017-03-13","count":34},{"date":"2017-03-14","count":6},{"date":"2017-03-16","count":46},{"date":"2017-03-17","count":28},{"date":"2017-03-18","count":50},{"date":"2017-03-19","count":8},{"date":"2017-03-20","count":6},{"date":"2017-03-21","count":37},{"date":"2017-03-24","count":4},{"date":"2017-03-25","count":47},{"date":"2017-03-26","count":27},{"date":"2017-03-27","count":48},{"date":"2017-03-28","count":18},{"date":"2017-03-29","count":32},{"date":"2017-03-31","count":32},{"date":"2017-04-01","count":38},{"date":"2017-04-02","count":22},{"date":"2017-04-03","count":25},{"date":"2017-04-05","count":13},{"date":"2017-04-06","count":50},{"date":"2017-04-07","count":2},{"date":"2017-04-08","count":32},{"date":"2017-04-09","count":33},{"date":"2017-04-10","count":12},{"date":"2017-04-11","count":30},{"date":"2017-04-12","count":45},{"date":"2017-04-13","count":6},{"date":"2017-04-15","count":37},{"date":"2017-04-16","count":39},{"date":"2017-04-18","count":46},{"date":"2017-04-19","count":41},{"date":"2017-04-20","count":28},{"date":"2017-04-22","count":38},{"date":"2017-04-23","count":43},{"date":"2017-04-24","count":1},{"date":"2017-04-25","count":49},{"date":"2017-04-26","count":21},{"date":"2017-04-27","count":7},{"date":"2017-04-30","count":28},{"date":"2017-05-01","count":37},{"date":"2017-05-02","count":27},{"date":"2017-05-03","count":23},{"date":"2017-05-04","count":43},{"date":"2017-05-06","count":1},{"date":"2017-05-07","count":8},{"date":"2017-05-08","count":47},{"date":"2017-05-09","count":25},{"date":"2017-05-10","count":43},{"date":"2017-05-11","count":49},{"date":"2017-05-12","count":3},{"date":"2017-05-14","count":43},{"date":"2017-05-15","count":15},{"date":"2017-05-16","count":48},{"date":"2017-05-18","count":43},{"date":"2017-05-19","count":9},{"date":"2017-05-21","count":35},{"date":"2017-05-23","count":12},{"date":"2017-05-24","count":36},{"date":"2017-05-25","count":39},{"date":"2017-05-26","count":25},{"date":"2017-05-27","count":1},{"date":"2017-05-28","count":42},{"date":"2017-05-30","count":18},{"date":"2017-05-31","count":44},{"date":"2017-06-01","count":45},{"date":"2017-06-02","count":19},{"date":"2017-06-03","count":42},{"date":"2017-06-04","count":50},{"date":"2017-06-05","count":13},{"date":"2017-06-06","count":32},{"date":"2017-06-08","count":48}]

我不知道如何解決這個問題。

Answer 1

要修復錯誤，您將導入更改為以下內容：

import date from './teste_arvore_data.json';

此外，由於您的日期是一個字符串，您需要將其轉換為Date object 以便調用getFullYear()

你應該能夠做這樣的事情。

  selectYear(yr) {
    const dataFiltered = date.filter((date) => new Date(date.date).getFullYear() === yr);
    return dataFiltered;
  }

Answer 2

我建議你讓節點處理.json文件導入，只需切換導入文件的方式，

改變這個：

import * as date from '../teste_arvore_data.json';

對此：

const date = require('../teste_arvore_data.json');