Using JSON files in vanilla websites

[sanjarcode]

1. Node - require works. import works too, but might need assert JSON.
2. Browser (vanilla) - fetch('./path-to-file') is simplest way that works for all browsers. FYI, import (with assert JSON) works on Chrome, but fails on Firefox or Safari.
3. Browser with bundlers - import data from "data.json" works fine.

On web, prefer using this wrapper

async function fetchJSON(pathToFile) {
  const resp = await fetch(pathToFile);
  const jsonFileAsObject = await resp.json();
  return jsonFileAsObject;
}

[sanjarcode]

Related:

• https://codereviewvideos.com/how-i-fixed-needs-an-import-assertion-of-type-json/
• https://github.com/tc39/proposal-import-assertions. code:

  import countryTable from "./data/countries.json" with { type: "json" };

[sanjarcode]

A more specific proposal of the above is in place to solve this. Will be released in 2024 hopefully. Current support is almost zero. See

• https://github.com/tc39/proposal-json-modules
• https://youtu.be/duNEnLUxie8?si=tJpAozWt8J6xPn5y?t=6m9s

Syntax is the same, with