获取本地 JSON答案

【问题标题】：Fetching local JSON获取本地 JSON
【发布时间】：2018-09-04 00:51:11
【问题描述】：

如何获取目录中的本地 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"])

    }


}

你能看出我做错了吗？我试图让这个反应，所以反应的工作方式可能不同？我不知道。任何帮助将不胜感激。谢谢！

【问题讨论】：

将require 移到组件外部的文件顶部
How can I parse through local JSON file in React js?的可能重复
您遇到什么错误？你使用的是 webpack/browserify 还是类似的？
感谢您回复我@acdcjunior 我只是一直不确定。仍在尝试使其正常工作。 sigh 现在尝试不同的方式。
你使用的是 webpack/browserify 还是类似的？

标签： javascript json reactjs

【解决方案1】：

由于浏览器安全限制，您需要从网络服务器运行您的网页。您可以通过确保首先安装 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服务器的任何端口）加载页面。

【讨论】：

非常感谢内森！我已经解决这个错误几个小时了，你的回答终于帮助了我。

【解决方案2】：

尝试使用文件系统。不要认为从 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
  }
});

【讨论】：

嘿，谢谢你回复我。当我使用它时，我得到“TypeError：fs.readFile 不是函数”
别忘了 require fs 可能会删除 node_modules 和 npm install
@BenE 您可能想首先确定他们是从服务器端而不是客户端执行此操作。

【解决方案3】：

使用fetch

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

希望对你有帮助

【讨论】：

如何获取 api 加载 url 中的文件？，我收到错误 file in URL is not accepted
@RohanDevaki 您是要下载文件还是要上传文件？如果您从 api 下载，您需要在请求中使用 arrayBuffer 作为响应类型。

【解决方案4】：

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

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

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

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

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

【讨论】：