web-dev-qa-db-fra.com

Comment analyser le fichier JSON local dans React js?

Comment puis-je analyser un fichier JSON en récupérant toutes ses données et en l'utilisant dans mon code?

J'ai essayé d'importer le fichier et juste d'essayer de le consigner par la console, mais tout ce qu'il fait est d'imprimer Object {}:

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

Voici à quoi ressemble mon fichier.json:

[
    {
      "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"
    }
]

Je voudrais pouvoir accéder au prénom et au nom de famille de chaque composant et les imprimer sur le site Web.

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

for(var i = 0; i < data.length; i++) {
    var obj = data[i];

    console.log("Name: " + obj.first_name + ", " + obj.last_name);
}

https://jsfiddle.net/c9wupvo6/

15
fuzz

J'ai aussi eu du mal à récupérer un objet vide. Même en utilisant require comme suggéré ci-dessus.

fetch cependant résolu mon problème:

fetch('./data/fakeData.json')
  .then((res) => res.json())
  .then((data) => {
    console.log('data:', data);
  })

(A ce jour, le support n'est pas optimal: http://caniuse.com/#feat=fetch )

5
patad

Pour ceux d'entre vous qui ont également des problèmes avec cela, ce code semble avoir résolu le problème

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

}
2
Parkicism

Les applications fournies avec webpack 2.0.0+ (telles que celles créées avec create-react-app ) prennent en charge les importations depuis json exactement comme dans la question (voir cette réponse .

Sachez que import met en cache le résultat, même si ce résultat est analysé json. Par conséquent, si vous modifiez cet objet, les modules qui l'importent également font référence à l'objet same object, et non à une copie récemment analysée.

Pour obtenir une copie "propre", vous pouvez créer une fonction qui la copie, telle que:

import jsonData from './file.json';

const loadData = () => JSON.parse(JSON.stringify(jsonData));

Ou si vous utilisez lodash :

import jsonData from './file.json';
import { cloneDeep } from 'lodash';

const loadData = () => cloneDeep(jsonData);
0
erich2k8