Filter an array from a json file

Question

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.

How looks the json file like? I mean if it has a real json structure, — hotcakedev
– hotcakedev, Commented Dec 9, 2020 at 1:57
Please share the json file structure, it would be helpful to answer your question. — Sarabadu
– Sarabadu, Commented Dec 9, 2020 at 2:12
it would probably help to know the typeof date, literally just console.log(typeof date) above that, that will tell you what you need to change. (maybe you need to do Array.from(date) — Dave Ankin
– Dave Ankin, Commented Dec 9, 2020 at 2:31

Todd Skelton · Accepted Answer · 2020-12-09 03:01:03Z

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;
  }

edited Dec 9, 2020 at 3:01

answered Dec 9, 2020 at 2:51

Todd Skelton

7,2873 gold badges39 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

3limin4t0r Over a year ago

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.

Todd Skelton Over a year ago

Added the fix for that as well. It was in the comments.

Brian Polanco · Accepted Answer · 2020-12-09 04:16:29Z

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');

answered Dec 9, 2020 at 4:16

Brian Polanco

481 silver badge8 bronze badges

Collectives™ on Stack Overflow

Filter an array from a json file

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related