我的目录是这样的
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 :)
