Jak mogę analizować lokalny plik JSON w React js?

Question

W jaki sposób można przeanalizować plik JSON, pobierając wszystkie jego dane i używając go w moim kodzie?

Próbowałem importowania pliku i po prostu starał konsolę zalogowaniu, ale wszystko to nie jest druk Object {}:

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

To właśnie moja file.json wygląda następująco:

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

Chciałbym mieć dostęp do imienia i nazwiska każdego z komponentów i wydrukować je na stronie internetowej.

Answer 1

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/

Answer 2

Dla tych z Was, którzy również mają problemy z tym, ten kod wydawało się, że problem został rozwiązany

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

} 

Answer 3

Miałem również problemy z uzyskaniem pusty obiekt powrotem. Nawet jeśli korzystasz z usługi require zgodnie z powyższymi sugestiami.

fetch jednak rozwiązać mój problem:

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

(dzień dzisiejszy, podpora nie jest optymalna choć: http://caniuse.com/#feat=fetch)