如何在 React js 中解析本地 JSON 文件？

Question

如何解析 JSON 文件以检索其所有数据并在我的代码中使用它？

我已尝试导入文件并尝试控制台记录它，但它所做的只是打印 Object {}：

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

这就是我的 file.json 的样子：

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

我希望能够访问每个组件的名字和姓氏并将其打印在网站上。

Answer 1

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": "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"
    }
];

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/

Answer 2

我在取回一个空对象时也遇到了问题。即使按照上面的建议使用require。

fetch 但是解决了我的问题：

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

（截至今天，支持不是最佳的：http://caniuse.com/#feat=fetch）

Answer 3

使用 webpack 2.0.0+ 打包的应用程序（例如使用 create-react-app 创建的应用程序）支持从 json 导入，与问题中完全相同（请参阅 this answer。

请注意import 会缓存结果，即使该结果已解析为 json，因此如果您修改该对象，其他导入它的模块也会引用 同一对象，而不是新解析的副本。

要获得“干净”的副本，您可以创建一个克隆它的函数，例如：

import jsonData from './file.json';

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

或者，如果您使用的是lodash：

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

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

Answer 4

对于那些也有这个问题的人，这段代码似乎已经解决了这个问题

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 5

JS 扩展运算符还有助于获取对象的深层副本。

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

const loadData = [...jsonData];