Question

如何获取目录中的本地JSON文件？

JSON文件如下所示：

[
  {
    "name": "Sara",
     "id": 3232
   },
  {
    "name": "Jim",
     "id": 2342
   },
  {
     "name": "Pete",
      "id": 532532
   }
]

如果我在同一个文件中有json信息，我试图使用它，它可以很好地工作，但是如果我想把它带进来，我不能为我的生活得到它工作，它一直在阅读它未定义。

这是我所拥有的

getData() {


    var json_data = require('../services/contributors.JSON');


    for (var i in json_data){
    console.log('Name: ' + json_data[i]["name"])

    }


}

你能看出我做错了什么吗？我试图让这个做出反应，所以也许反应有所不同？我不知道。任何帮助将不胜感激。谢谢！

Answer 1

使用fetch

fetch("../services/contributors.JSON")
.then(res => res.json())
.then(data => console.log(data))

我希望这会有所帮助

Answer 2

由于浏览器安全限制，您需要从Web服务器运行您的网页。您可以通过确保首先安装Node.js，然后安装一个简单的开发服务器来轻松完成此任务：

npm install -g http-server

然后从您的控制台/终端导航到包含您代码的目录，然后运行：

http-server

最后，更新您的JavaScript代码以加载它，就像您使用任何其他服务器调用一样：

async function loadJSON (url) {
  const res = await fetch(url);
  return await res.json();
}

loadJSON('../services/contributors.JSON').then(data => {
  console.log(data[0].name);
});

然后从http://localhost:8080（或您运行http服务器的任何端口）加载页面。

Answer 3

尝试使用文件系统。不要认为从JSON文件中读取就像那样。

const fs = require('fs');
const json_data = require('../services/contributors.JSON');

fs.readFile(json_data, 'utf8', function (err, data) {
  try {
    data = JSON.parse(data)
    for (let i in data){
    console.log('Name:',data[i].name)
    }
  } catch (e) {
    // Catch error in case file doesn't exist or isn't valid JSON
  }
});

Answer 4

经过数小时试图理解这里的一些评论后，我发现公共文件夹位于 React 应用程序的根文件夹中，而不是其他地方，因为我正忙于寻找一个没有丢失的公共文件夹。

>

所以对于像我们这样仍然想知道公共文件夹在哪里的任何人和新手来说，它就位于“Node_Modules”文件夹下的项目文件夹中

之后，我使用了以下代码：

    useEffect(() => {
    fetch('data.json')
        .then(response => response.json())
        .then((json) => setData(json))
}, [])

还有中提琴，我的json文件被提取了！

Answer 5

您可以为此使用fetch

fetch('path to the json file')
 .then(response => response)
 .then(data => {
 //do whatever with your data
                      
})

获取本地JSON

5 个答案: