如何在 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": "[e-mail]",
      "ip_address": "227.211.25.18"
    }, {
      "id": 2,
      "gender": "Male",
      "first_name": "Carlos",
      "last_name": "Fowler",
      "email": "[e-mail]",
      "ip_address": "214.248.201.11"
    }
]

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

原文由 Parkicism 发布，翻译遵循 CC BY-SA 4.0 许可协议

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": "[e-mail]",
      "ip_address": "227.211.25.18"
    }, {
      "id": 2,
      "gender": "Male",
      "first_name": "Carlos",
      "last_name": "Fowler",
      "email": "[e-mail]",
      "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/

原文由 fulvio 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

请注意 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);

原文由 Eric Haynes 发布，翻译遵循 CC BY-SA 4.0 许可协议