将本地 JSON 文件加载到 HTML 模板中答案

【问题标题】：Load local JSON File into a HTML template将本地 JSON 文件加载到 HTML 模板中
【发布时间】：2020-12-28 18:09:06
【问题描述】：

我正在尝试将 json 文件加载到 html 模板中，这样我就可以在浏览器中以格式化的方式查看内容。 json 文件由 Java 项目生成。我已经尝试使用 javascript 来执行此操作，但似乎 java 只能从服务器而不是本地目录中获取 json 文件。他们有什么方法可以使用 javascript 或 typescript 或其他方法来做到这一点吗？

【问题讨论】：

浏览器内 JS 无法访问本地文件，除非用户首先使用 <input type="file"> 选择了文件。没有别的办法，没有。出于明显的安全原因。
唯一的办法就是使用FileReader API。

标签： javascript html json typescript

【解决方案1】：

您可以使用fetch API 来检索您的 JSON 信息，如果您使用 VSCode，您只需启动插件 Live Server 即可在本地目录中对其进行测试。

  fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));

用于 VSCode 的实时服务器插件 https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

【讨论】：

【解决方案2】：

您可以使用fetch 从远程服务器检索它或使用<input type="file" ... /> 并让用户使用“打开文件”文件浏览器对话框选择 JSON 文件。

在使用 TypeScript 编译应用程序时，您还可以在编译时包含磁盘中的 JSON 文件。

还有File API、FileReader API 和FileSystem API 用于在运行时本地管理磁盘上的文件。但是这些可能只能读取驻留在某些位置的 Web 浏览器写入的文件，并且由于安全性和沙盒，可能无法访问文件系统上的任何文件。

【讨论】：