首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在React js中解析本地JSON文件?

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

Stack Overflow用户
提问于 2016-06-06 12:46:58
回答 4查看 112.9K关注 0票数 36

如何解析JSON文件,检索其所有数据并在代码中使用?

我已经尝试导入该文件,并尝试在控制台记录它,但它所做的全部工作是打印对象{}:

代码语言:javascript
复制
import jsonData from "./file.json";
console.log(jsonData);

这是我的file.json的样子:

代码语言:javascript
复制
[
    {
      "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"
    }
]

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

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2016-06-06 12:48:48

代码语言:javascript
复制
var data = require('../../file.json'); // forward slashes will depend on the file location

代码语言:javascript
复制
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/

票数 36
EN

Stack Overflow用户

发布于 2016-09-29 00:09:37

我在取回一个空对象时也遇到了问题。即使使用上面建议的require也是如此。

然而,fetch解决了我的问题:

代码语言:javascript
复制
fetch('./data/fakeData.json')
  .then((res) => res.json())
  .then((data) => {
    console.log('data:', data);
  })

(到目前为止,支持并不是最优的:http://caniuse.com/#feat=fetch)

票数 13
EN

Stack Overflow用户

发布于 2016-06-07 03:58:40

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

代码语言:javascript
复制
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();
}

}
票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/37649695

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档