How can I parse through local JSON file in React js?

Question

How can I parse through a JSON file retrieving all its data and using it in my code?

I've tried importing the file and just tried console logging it, but all it does is print Object {}:

import jsonData from "./file.json";
console.log(jsonData);

This is what my file.json looks like:

[
    {
      "id": 1,
      "gender": "Female",
      "first_name": "Helen",
      "last_name": "Nguyen",
      "email": "[email protected]",
      "ip_address": "227.211.25.18"
    }, {
      "id": 2,
      "gender": "Male",
      "first_name": "Carlos",
      "last_name": "Fowler",
      "email": "[email protected]",
      "ip_address": "214.248.201.11"
    }
]

I'd want to be able to access the first and last name of each component and print those on the website.

this seemed to work for me as is

steff_bdh
– steff_bdh

2019-09-10 03:49:08 +00:00
Commented Sep 10, 2019 at 3:49 — steff_bdh
– steff_bdh, Commented Sep 10, 2019 at 3:49

gotnull · Accepted Answer · 2020-08-25 08:03:56Z

42

var data = require('../../file.json'); // forward slashes will depend on the file location

var data = [
    {
      "id": 1,
      "gender": "Female",
      "first_name": "Helen",
      "last_name": "Nguyen",
      "email": "[email protected]",
      "ip_address": "227.211.25.18"
    }, {
      "id": 2,
      "gender": "Male",
      "first_name": "Carlos",
      "last_name": "Fowler",
      "email": "[email protected]",
      "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}`);
}

https://jsfiddle.net/c9wupvo6/

edited Aug 25, 2020 at 8:03

answered Jun 6, 2016 at 4:48

gotnull

27.2k23 gold badges143 silver badges207 bronze badges

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

1 Comment

Parkicism Over a year ago

I am getting this error: Uncaught Error: Cannot find module "json!./Sections/file.json" even though that is the right path.

Eric Haynes · Accepted Answer · 2018-08-04 00:37:22Z

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

patad · Accepted Answer · 2016-09-28 16:09:37Z

17

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)

answered Sep 28, 2016 at 16:09

patad

9,72211 gold badges42 silver badges44 bronze badges

4 Comments

PlunkettBoy Over a year ago

This seems like it should work. But whenever I try it I get "localhost/:1 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0"

Community Over a year ago

how to make this work? the url generated for the fetch is incorrect. hence the jseals. error.

reisdev Over a year ago

@Community I've found a solution! Instead of passing the relative path, you need to pass the complete path(inside your project), like fetch("src/data/fakeData.json). Instead of using res.json(), use res.text(), and, in the last then, use JSON.parse(data)

Sagive Over a year ago

Thanks Muchachito - its getting there 💪 - just DONT FORGET to wrap this inside a useEffect or it wont work & also loop forever while failing

Parkicism · Accepted Answer · 2016-06-06 19:58:40Z

For those of you who also have trouble with this, this code seemed to have fixed the problem

var jsonData = require('../../file.json');

class blah extends React.Component {

render(){
    var data; 

    function loadJSON(jsonfile, callback) {   

        var jsonObj = new XMLHttpRequest();
        jsonObj.overrideMimeType("application/json");
        jsonObj.open('GET', "../../file.json", true);
        jsonObj.onreadystatechange = function () {
              if (jsonObj.readyState == 4 && jsonObj.status == "200") {
                callback(jsonObj.responseText);
              }
        };
        jsonObj.send(null);  
     }

    function load() {

        loadJSON(jsonData, function(response) {
            data = JSON.parse(response);
            console.log(data);
        });
    }

    load();
}

}

This seems excessive for getting JSON into a local JS code, isn't there an easier solution?

fireflycaptainz · Accepted Answer · 2020-03-20 15:55:52Z

2

The JS spread operator also helps to get a deep copy of the object.

import jsonData from '../../file.json';

const loadData = [...jsonData];

answered Mar 20, 2020 at 15:55

fireflycaptainz

534 bronze badges

2 Comments

Eric Haynes Over a year ago

The spread operator is a SHALLOW copy, not a deep one. The above would result in a new array, but the exact same object instances within it.

thodwris Over a year ago

@EricHaynes is right

Collectives™ on Stack Overflow

How can I parse through local JSON file in React js?

5 Answers 5

1 Comment

1 Comment

4 Comments

1 Comment

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

4 Comments

1 Comment

2 Comments

Linked

Related