使用javascript导入json文件[重复]

【问题标题】：Use javascript to import a json file [duplicate]使用javascript导入json文件[重复]
【发布时间】：2021-02-23 11:28:09
【问题描述】：

我正在使用 json 文件创建一个网站来存储要在其中一个页面上使用的数据，但我很难成功导入数据。我使用 repl.it 进行编码。

到目前为止我已经尝试过：

var data = require("data.json") 得到了ReferenceError: require is not defined

和

<script src="data.json"></script>const dta = JSON.parse(data) 得到了ReferenceError: data is not defined

我看了其他问题，真的被他们弄糊涂了

我不确定这是否相关，但我的 json 文件中也出现语法错误，如下所示 data = '[{"foo": "bar"}]'

如何解决这些错误？

【问题讨论】：

【解决方案1】：

require 是一个 Node.js 函数。它（在撰写本文时）尚不存在于浏览器中。而且您从未声明过data，所以是的，它没有定义。您可以使用 Fetch API fetch JSON 数据：

fetch('/data.json').then((res) => res.json()).then((data) => console.log(data))

在 MDN 上搜索“promises”以获取有关 thenmethod 的信息为了能够在全局范围内访问 data，您可以使用带有 async/await 的 Immediately Invoked Function Expression (IIFE)。

(async function() {
const data = await fetch('/data.json').then((res) => res.json()).then((data) => data);
})();

在 MDN 上搜索“IIFE”了解更多信息，async/await 是一种消费承诺的方式。

【讨论】：