How can I parse through local JSON file in React js?
var data = require('../../file.json'); // forward slashes will depend on the file locationvar data = [ { "id": 1, "gender": "Female", "first_name": "Helen", "last_name": "Nguyen", "email": "hnguyen0@bloomberg.com", "ip_address": "227.211.25.18" }, { "id": 2, "gender": "Male", "first_name": "Carlos", "last_name": "Fowler", "email": "cfowler1@gnu.org", "ip_address": "214.248.201.11" }];for (var i = 0; i < data.length; i++){ var obj = data[i]; console.log(`Name: ${obj.last_name}, ${obj.first_name}`);}
I also had problems with getting an empty Object back. Even when using require as suggested above.
fetch however solved my problem:
fetch('./data/fakeData.json') .then((res) => res.json()) .then((data) => { console.log('data:', data); })(As of today, the support isn't optimal though: http://caniuse.com/#feat=fetch)
Applications packaged with webpack 2.0.0+ (such as those created with create-react-app) support imports from json exactly as in the question (see this answer.
Be aware that import caches the result, even if that result is parsed json, so if you modify that object, other modules that also import it have references to the same object, not a newly parsed copy.
To get a "clean" copy, you can make a function that clones it such as:
import jsonData from './file.json';const loadData = () => JSON.parse(JSON.stringify(jsonData));Or if you're using lodash:
import jsonData from './file.json';import { cloneDeep } from 'lodash';const loadData = () => cloneDeep(jsonData);