How do I simply make my JSON data accessible by my script?

Question

My directory goes like that

app/
  index.html
  script.js
  data.json

Sounds good? Now, I would like to choose a random object from my JSON data and present it to the user each time my document is loaded, good? Now I have a problem at that first part of it, getting the data from my data.json in the most optimal way possible. I can add an XMLHttpRequest() in my script.js to fetch the contents of my data.json or I would even use the fetch API, but I understand that these are made for "fetching" data across the web and are considered some sort of an overkill for such a simple task, I mean you don't need to send an HTTP request to link your CSS with your HTML, do you? So I figured out there must be a way to do that easily, one answer I found out there was to link your data as so <script id="data" src="./data.json" type="application/json"></script> and then you can document.getElementById("data") it, but that didn't work for me for some reason, one workaround that I came with was to change my data.json to data.js and just add a var data = prefix to my whole JSON data and then import that to my index.html and now I can access the variable data from my script, but I feel this is too hacky and isn't/shouldn't be the optimal to go around this. I think this scratches the topic of CORS/Same-origin which is a concept I have a feeble grasp on. A detailed explanation of what is going on in here would be greatly appreciated :)

EDIT: The answers provided speak solely of the fetch API, my issue is why is an HTTP request required to get access to a local file? why can't we link the JSON data through a link tag just like everything else e.g. our HTML, CSS, JS which are all linked using link/script tags.

Answer 1

I've come up with the three approaches below:

1) Fetch (or XHR) the .json file

I'd definitely regard using the Fetch API (or XHR) as the standard approach to enable a web document to retrieve a .json file from the server.

fetch('/app/data.json')
  .then(response => response.json())
  .then(json => console.log(json));

2) Reference a .js file instead of a .json file

ie. Use '/app/my-json-data.js' instead of '/app/data.json'

As you correctly point out in your question, you could upload a .js file to your server instead of a .json file, where, if your original JSON file '/app/data.json' looked like this:

{"Name" : "Data", "Section 1" : {"A" : "a", "B" : "b"}, "Section 2" : ["C", "D"]}

then your JS file '/app/my-json-data.js' would look like this, instead:

let myJSONData = '{"Name" : "Data", "Section 1" : {"A" : "a", "B" : "b"}, "Section 2" : ["C", "D"]}';

Then you could retrieve that JSON string into your document using:

<script src="/app/my-json-data.js"></script>

after which the string would exist in the document's javascript global scope as the variable myJSONData.

3) Embed the .json file in the document (via <object> or <iframe>)

When we were discussing earlier, I commented:

I guess because HTML lacks anything like <file type="application/json" src="/app/data.json" /> (analogous to <img src="/app/my-image.png" alt="My Image" />).

Then, I wondered if that was actually true. It turns out, it's not.

Here's a third way to retrieve the .json from the server:

---

Using HTML5 <embed>

<embed> appears to be locked and its contentDocument inaccessible. Not clear why.

---

Using HTML5 <object>

HTML:

<object data="/app/data.json" style="display: none"></object>

JS:

<script>
let myObject = document.getElementsByTagName('object')[0];

const getJSONFromObject = () => {
  console.log(myObject.contentDocument.body.textContent);
}

myObject.addEventListener('load', getJSONFromObject);
</script>

---

Using HTML5 <iframe>

HTML:

<iframe src="/app/data.json" style="display: none"></iframe>

JS:

<script>
let myIframe = document.getElementsByTagName('iframe')[0];

const getJSONFromIframe = () => {
  console.log(myIframe.contentDocument.body.textContent);
}

myIframe.addEventListener('load', getJSONFromIframe);
</script>

---

In order of personal preference, my favoured approaches would be:

1. Fetch the .json file
2. XHR the .json file
3. Use a .js file instead of a .json file
4. Embed the .json in the document via <object>