Question

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

我尝试导入该文件并尝试使用控制台记录它，但它所做的只是打印对象{}：

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

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

我还遇到了一个空的Object回来的问题。即使按照上面的建议使用require。

然而

fetch解决了我的问题：

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

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

Answer 3

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

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

const loadData = [...jsonData];

Answer 4

对于那些也遇到问题的人来说，这段代码似乎解决了问题

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="option-card">
<img src="http://placekitten.com/100/100" class="card-thumb" alt="">
<p>Sodales feugiat etiam venenatis dui convallis</p>
</div>

<div class="option-card">
<img src="http://placekitten.com/100/100" class="card-thumb" alt="">
<p>Sodales feugiat etiam venenatis dui convallis</p>
</div>

<div class="option-card">
<img src="http://placekitten.com/100/100" class="card-thumb" alt="">
<p>Sodales feugiat etiam venenatis dui convallis</p>
</div>

Answer 5

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

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

要获得“干净”的副本，可以制作一个将其克隆的函数，例如：

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

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

5 个答案: