How to fetch local json file into constructor in reactjs

Question

I have data.json file in my react app and I would like to use in my home.js file which have currently internally json values.

Is there any way to call data.json file into my this.state constructor.

class Home extends Component {
  constructor ()
{
  super();
  this.state={
    data:[
      {
        rank:1,
        name:'Name one',
        agency:'agency one',
      },
      {
        rank:2,
        name:'Name Two',
        agency:'agency two',
      },
      {
        rank:3,
        name:'Name Three',
        agency:'agency three',
      }
    ]
  }
}



render() {
    return (
      <div>
        {
          this.state.data.map((value) =>
          <div>
            <span>{value.rank}</span>
            <span>{value.name}</span>
            <span>{value.agency}</span>
          </div>
          )
        } 
      </div>
    );
  }
}

export default Home;

stackoverflow.com/questions/31758081/…

Sai Teja Pakalapati
– Sai Teja Pakalapati

2018-08-01 11:33:02 +00:00
Commented Aug 1, 2018 at 11:33 — Sai Teja Pakalapati
– Sai Teja Pakalapati, Commented Aug 1, 2018 at 11:33

devserkan · Accepted Answer · 2018-08-01 11:40:52Z

2

You can import it as a default value then assign it in your state.

import data from "./data.json";

class Home extends Component {
  constructor ()
{
  super();
  this.state={
    data,
  }
}



render() {
    return (
      <div>
        {
          this.state.data.map((value) =>
          <div>
            <span>{value.rank}</span>
            <span>{value.name}</span>
            <span>{value.agency}</span>
          </div>
          )
        } 
      </div>
    );
  }
}

export default Home;

answered Aug 1, 2018 at 11:40

devserkan

17.7k4 gold badges34 silver badges48 bronze badges

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

1 Comment

ptent Over a year ago

Might have to use the spread operator here, like this.state = { data: [ ... data ] }

Revansiddh · Accepted Answer · 2018-08-01 11:36:10Z

0

Let's consider your JSON file temp.json stored in the same directory. Assigning to data state on constructor like

 this.state = {
      package: require("./temp.json")
 };

Use like usual state. this.state.data[0].rank or map.

Example https://codesandbox.io/s/92qpzoz4rw

answered Aug 1, 2018 at 11:36

Revansiddh

3,0923 gold badges21 silver badges34 bronze badges

1 Comment

Abhishek Bhatore Over a year ago

Thanks Revansiddh, for reply. As I am absolute beginner in react so somehow not able to manage require method. It seems working once I use package.json as per codesandbox but one I use package: require("./json/data.json") file from my json folder somehow error seems. But for now as per current scenario tweak suggested by devserkan works for me, I will surely 100% try this require method as well. just one query, are you available if I have any doubt related your suggested method.

Serdar · Accepted Answer · 2018-08-01 11:58:09Z

You can try this: 1. $ npm install load-json-file; 2. you can view also load-json-file implementation detail here: https://github.com/sindresorhus/load-json-file

import loadJsonFile from 'load-json-file'
class Home extends Component {
  constructor ()
{
  super();
  this.state={data:''}

componentDidMount(){
loadJsonFile('data.json').then(json => {
    console.log(json);
    this.setState={data: json}
});

}


render() {
    return (
      <div>
        {
          this.state.data.map((value) =>
          <div>
            <span>{value.rank}</span>
            <span>{value.name}</span>
            <span>{value.agency}</span>
          </div>
          )
        } 
      </div>
    );
  }
}

export default Home;

Collectives™ on Stack Overflow

How to fetch local json file into constructor in reactjs

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related