web-dev-qa-db-de.com

Wie kann ich eine lokale JSON-Datei in React js analysieren?

Wie kann ich eine JSON-Datei analysieren, alle Daten abrufen und in meinem Code verwenden?

Ich habe versucht, die Datei zu importieren und habe gerade versucht, sie in der Konsole zu protokollieren.

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

So sieht mein file.json aus:

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

Ich möchte in der Lage sein, auf den Vor- und Nachnamen jeder Komponente zuzugreifen und diese auf der Website zu drucken.

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

Ich hatte auch Probleme, ein leeres Objekt zurückzubekommen. Auch wenn Sie require verwenden, wie oben vorgeschlagen.

fetch löste jedoch mein Problem:

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

(Heute ist der Support jedoch nicht optimal: http://caniuse.com/#feat=fetch )

5
patad

Für diejenigen von Ihnen, die ebenfalls Probleme damit haben, schien dieser Code das Problem behoben zu haben

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

Mit webpack 2.0.0+ gepackte Anwendungen (z. B. solche, die mit create -react-app erstellt wurden) unterstützen den Import von json genauso wie in der Frage (siehe diese Antwort ).

Beachten Sie, dass import das Ergebnis zwischenspeichert, auch wenn das Ergebnis json analysiert wird. Wenn Sie also dieses Objekt ändern, haben andere Module, die es importieren, Verweise auf das Objekt dasselbe Objekt und keine neu geparste Kopie.

Um eine "saubere" Kopie zu erhalten, können Sie eine Funktion erstellen, die diese kopiert:

import jsonData from './file.json';

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

Oder wenn Sie lodash verwenden:

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

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