0

I'm using reactjs and I have an array in a json file. I need to filter this array and I'm trying to do a filter(date.filter) in the selectYear function, but is returning this error:

Attempted import error: 'filter' is not exported from '../teste_arvore_data.json' (imported as 'date').

My code:

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;

The json structure:

[{"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}]

I don't know how to solve this problem.

Ana Flávia Capdeville
  • 1
  • 1

2 Answers2

0

To fix the error you are getting change your import to the following:

import date from './teste_arvore_data.json';

Also, since your date is a string, you need to convert it to a Date object in order to call getFullYear()

You should be able to do something like this.

  selectYear(yr) {
    const dataFiltered = date.filter((date) => new Date(date.date).getFullYear() === yr);
    return dataFiltered;
  }
Todd Skelton
  • 6,839
  • 3
  • 36
  • 48
  • Changing the date does not solve the "Attempted import error: 'filter' is not exported from '../teste_arvore_data.json' (imported as 'date')." error the question asks about and is only relevant if `filter` actually works. – 3limin4t0r Dec 09 '20 at 02:59
  • Added the fix for that as well. It was in the comments. – Todd Skelton Dec 09 '20 at 03:02
0

I'd suggest you to let node handle the .json file import, simply switch the way you're importing the file,

change this:

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

to this:

const date = require('../teste_arvore_data.json');
Brian Polanco
  • 48
  • 1
  • 8