如何从香草javascript中的json文件导入数组

Question

我正在做一个简单的 vanilla js 项目，我们不能使用 node js 和 babel 我正在尝试从 json 文件导入数组，然后出现此错误：

Uncaught SyntaxError: Cannot use import statement outside a module

所以现在我想找到一种方法来映射数组（在其上使用 .map()），而不必从 json 文件中复制并粘贴它并手动将其放入 app.js 中

知道如何在没有节点或 webpack 的情况下做到这一点吗？

Answer 1

Node.js 倾向于将从 JSON 加载数据和加载 JavaScript 模块混为一谈。许多 Webpack/Babel 插件做同样的事情。当您不使用这些工具时，您需要将这些概念分开。 import 用于加载 ES6 模块，而不是 JSON 数据。

要加载 JSON，请发出 HTTP 请求以使用 XMLHttpRequest、fetch 或包装其中之一的库加载文件。然后解析结果（使用JSON.parse() 或使用您选择的API 的内置解析功能）。

fetch("/path/to/my.json")
    .then(response => response.json())
    .then(parsed_data => {
        const mapped_data = parsed_data.map(...);
        // etc
    });