如何在React js中解析本地JSON文件？
如何在React js中解析本地JSON文件？
提问于 2016-06-06 12:46:58
如何解析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"
}
]我希望能够访问每个组件的名字和姓氏，并将它们打印在网站上。
回答 4
Stack Overflow用户
回答已采纳
发布于 2016-06-06 12:48:48
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}`);
}
Stack Overflow用户
发布于 2016-09-29 00:09:37
我在取回一个空对象时也遇到了问题。即使使用上面建议的require也是如此。
然而，fetch解决了我的问题：
fetch('./data/fakeData.json')
.then((res) => res.json())
.then((data) => {
console.log('data:', data);
})(到目前为止，支持并不是最优的：http://caniuse.com/#feat=fetch)
Stack Overflow用户
发布于 2016-06-07 03:58:40
对于那些在这方面也有问题的人，这段代码似乎已经解决了这个问题
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();
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37649695
复制相关文章
相似问题
腾讯云开发者
