re: How can I read a local JSON file in HTML/JavaScript? VIEW POST


OMG, I was just looking into this yesterday and did it by using JQuery:

$(document).ready(function () {
            $.getJSON('MY_JSON_FILE.json', function (data) {

Does it without having to run a server of any sort.


Also yes, it does require a server(?), for me(?), it provides two (standard) errors:

Access to XMLHttpRequest at 'path.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
GET path.json net::ERR_FAILED

how did you get around these? and how can I do it too?


Oh, yes regarding CORS policy. Since, I was using Firefox, I had to disable something related to CORS.

My directory structure is as follow:

│   index.html
│   Synonyms.json
│       bulma.min.css

And, the code itself went in head:

    <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>

       $(document).ready(function () {
            $.getJSON('Synonyms.json', function (data) {

Here is the thing related to CORS on firefox: developer.mozilla.org/en-US/docs/W...

What about other browsers? And how can I ensure, or detect whether a user toggled said specific CORS flag in their browser?
If you could answer these, especially the second one, that would really help me.
Thank you so much!

So, I decided to quickly test it using GitHub pages. Instead of using console.log(data) I got the div and changed the text content:


and JSON being:

  "id": "Foo"

I've only tested it on my current browser (Firefox with CORS thingy off) and my s9+ using bromite (Chromium based) and it seems to be displaying the value of id without any issues.


Wait, did you but this in the head, or body? Or does that not matter?


getJSON is using XHR. So is fetch. There must be a server.

code of conduct - report abuse