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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (1583)

如何通过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"
    }
]

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

提问于
用户回答回答于
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();
}

}
用户回答回答于

我也遇到了获取空对象的问题。即使按照上面的建议使用require。然而fetch解决了我的问题:

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

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励