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

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;

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

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Linked

Related