Is it possible to have an HTML and JSON file stored on your PC, and have HTML load the json data WITHOUT node.js or server?

Question

Is it possible to have an HTML and JSON file stored on your PC, and have HTML load the json data WITHOUT node.js or server?

566 views Asked by AAsomb113 At 30 April 2023 at 01:22

I stumbled an issue where I'm working on an HTML file that would load a separate json file. The HTML file have JS code in the <script></script> tag and the json file contains an array with some objects. Both HTML and JSON are stored on my hard drive and my HTML will load using a file path to direct to a file on my PC, not a URL across the internet, to the json file, akin to img src tag using a relative path to an image on my PC.

This video: https://www.youtube.com/watch?v=nx8E5BF0XuE told me that due to the CORS policy made the $.ajax to grab the file stored on his PC, a server is required.

I originally tried doing this before being aware of that video:

        (async () => { 
            const List = await (await fetch("FileWithObjects.json")).json() 
        })()

And got a similar error:

If I do not want to use a server as well as node.js, do I HAVE TO have the JSON data in the HTML file itself?

Original Q&A

There are 1 answers

**Nick.Mc** · Answer 1 · 2023-04-30T02:26:55+00:00

I couldn't find a useful answer online that I could believe so I tried it myself

Instead of a JSON file you need a javascript file that sets a javascript variable to the JSON.

index.htm

The HTML file references a local javascript file via <script src

<!DOCTYPE html>
<html>
  <head>
    <script src="script1.js"></script>
  </head>
  <body>
    <div id="mydiv"></div>
  <script>
    console.log(j);
    setTimeout(() => 
        {
            document.getElementById("mydiv").innerHTML=j.stuff[2];
        } , 
        5000  
    )
  </script>

  </body>
</html>

script1.js

This is in the same folder as index.htm

Note this is a javascript file that sets javascript variable j to the JSON you want.

j=
{
    "stuff": [0,1,2,3,4,5,6]
}

If you open the web page, you'll see a tiny 2 in the top left corner from the static json file

Note that you can only manipulate JSON (or do any non-presentation "computational" things) via javascript. You can't do anything with JSON with HTML alone.

All methods such as get, fetch, ajax can only load data from a "web service", which in turn requires a web server

TechQA.

Is it possible to have an HTML and JSON file stored on your PC, and have HTML load the json data WITHOUT node.js or server?

There are 1 answers

index.htm

script1.js

Related Questions in JSON

Related Questions in LOADING

Related Questions in EXTERNAL

Related Questions in HARD-DRIVE

Popular Questions

Popular Tags

Trending Questions