CODEWITHSUNDEEP
javascriptjsonreactjs
Parkicism
Parkicism

Reputation: 2535

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

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.

Upvotes: 49

Views: 158177

Answers (5)

gotnull
gotnull

Reputation: 27214

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/

Upvotes: 42

fireflycaptainz
fireflycaptainz

Reputation: 53

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

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

const loadData = [...jsonData];

Upvotes: 2

Eric Haynes
Eric Haynes

Reputation: 5786

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

Upvotes: 20

patad
patad

Reputation: 9672

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)

Upvotes: 17

Parkicism
Parkicism

Reputation: 2535

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

}

Upvotes: 4

Related Questions