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

问题描述

我正在尝试将json文件加载到html模板中，因此我可以在浏览器中以格式化的方式查看内容。 json文件由Java项目生成。我已经尝试过使用javascript，但是似乎Java只能从服务器而不是本地目录中获取json文件。有没有办法用javascript或打字稿或其他方式做到这一点？

解决方法

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

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

VSCode的Live Server插件 https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

,

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

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

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