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

Question

I'm trying to load a json file into to an html template, so I can view the content in a formated way inside my browser. The json file is generated by a Java project. I already tried to do this with javascript but it seems to be that java only can fetch a json file from a server and not from a local directory. Is their any way to do this with javascript or typescript or maybe something else?

Answer 1

You can use fetch API to retrieve the informations of your JSON and if you use VSCode you can just launch the plugin Live Server to test it in your local directory.

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

Live Server Plugin for VSCode https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Answer 2

You can use fetch to retrieve it from a remote server or have a <input type="file" ... /> and let the user pick the JSON file using the "Open File" file browser dialog.

You can also include the JSON file from disk at compile-time when compile the application using TypeScript.

There are also the File API , FileReader API , and FileSystem API to manage files locally on disk at runtime. But these might only be able to read files written by the web browser that reside in certain locations and might not be able to access any file on file system due to security and sandboxing.