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

IT技术 javascript json reactjs
2021-03-30 02:01:52

如何解析 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"
    }
]

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

5个回答
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/

我收到此错误：Uncaught Error: Cannot find module "json!./Sections/file.json"即使这是正确的路径。
2021-05-23 02:01:52

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

fetch 但是解决了我的问题：

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

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

如何使这项工作？为 fetch 生成的 url 不正确。因此是 jseals。错误。
2021-05-30 02:01:52
@Community 我找到了解决方案！您需要传递完整路径（在您的项目中），而不是传递相对路径，例如fetch("src/data/fakeData.json). 而不是使用res.json()，使用res.text()，并且，在最后然后，使用JSON.parse(data)
2021-06-01 02:01:52
这似乎应该起作用。但是每当我尝试它时，我都会得到“localhost/:1 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0”
2021-06-12 02:01:52

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

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

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

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

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

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

}
这对于将 JSON 放入本地 JS 代码似乎有些过分，难道没有更简单的解决方案吗？
2021-06-14 02:01:52

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

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

const loadData = [...jsonData];
@EricHaynes 是对的
2021-05-28 02:01:52
扩展运算符是一种浅拷贝，而不是深拷贝。以上将产生一个新数组，但其中包含完全相同的对象实例。
2021-06-08 02:01:52
其它你可能感兴趣的问题
上一篇如何让react-router以 404 状态代码响应？ 下一篇create-react-app npm run build 命令