Load LOCAL JSON file in an HTML using JS (and jquery and/or AJAX); ANSWER=IMPOSSIBLE

Question

Problem definition:

I am programming one HTML file to be run locally in a user machine NOT FUNCTIONING AS A SERVER. A user could run this html file locally stored in his computer. The HTML file will generate a table dynamically based on the data stored in his machine locally in a particular folder (which is always the same). This data is a JSON file.

For clarity reasons asume that the JSON file is in the same folder as the HTML file.

I have been reading a lot in the internet and in stack overflow at no avail. For instance: a) here with:

$.getJSON("books.json", function(json) {
    console.log(json);
    //access your JSON file through the variable "json"
});

does not work.

Or using this code:

jQuery.getJSON("data.json", handleJSON);

function handleJSON(result){
   jQuery.each(result, printFields);
}

function printFields(i, field){
   let row = field.id + " "+field.first_name + " "+field.last_name + " <br>";
   jQuery("div").append(row);
}

the console says: [Error] Failed to load resource: Preflight response is not successful (data.json, line 0) [Error] XMLHttpRequest cannot load file:///Users/jose/CODE/HTML/ConceptsHTML/example%203/data.json. Preflight response is not successful

There are several other links of Stack overflow that I could put here. None one functions as smoothly as they say they do. (I am using a MAC and trying the HTMLs in Safari and Chrome)

Ultimately I want of course to pass the JSON to an array to be access in other scripts of the HTML.

Note: There are some solutions where it is said that the local machine has to be run as a server and an Httprequest should be done in the machine. Well I can not do that since the users can only open the html file but nothing can be expected from them as to set the machine as as ever whatsoever.

I would be very very glad If I get a hint as to how to proceed. Right now I don't even know if this is actually possible to do.

thanks a lot

thanks. could you elaborate a bit? There should be cases in which users have sensible data which can not go to any external server but can be stored locally. I can not imagine that I am the first one having this issue. That means that it is not possible to use HTML to build websites based on local data. — JFerro, Sep 02 '18 at 18:12
Is for instance all this FALSE?: https://scotch.io/tutorials/use-the-html5-file-api-to-work-with-files-locally-in-the-browser In this example the web site loads a picture LOCALLY. — JFerro, Sep 02 '18 at 18:14
That's only possible by having the user explicitly select a file, not by hard-coding a path. And yes, it is not possible to use HTML to build websites based on local data (without a server). You should use a server. — SLaks, Sep 02 '18 at 18:59

score 1 · Answer 1 · answered Sep 02 '18 at 19:01

You could just use another JS file and link to it in your HTML file, and then in that JS file just make an object with the data you want.

HTML:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="json.js"></script>
    <script type="text/javascript">
        function fun(){
            alert(json.data);
        }
    </script>
</head>
<body>
    <button onclick="fun();">push me</button>
</body>
</html>

JS (json.js):

var json = {
data : "hello world"
};

Linking to a local JSON file cannot be done.

score 0 · Answer 2 · answered Sep 03 '18 at 05:22

THE ANSWER IS:

IT IS NOT POSSIBLE TO READ LOCAL FILES (FILES IN THE USER MACHINE) WITH HTML DUE TO SECURITY REASONS.

The funny thing is that there are plenty of post telling the contrary.

I UNDERSTAND THAT IF THAT WOULD BE POSSIBLE SENSIBLE DATA MIGHT BE STOLEN.

The improvement for html future versions would be to create a way for the local. User to tell the local browser which local folder is "free" to be accesible by html.

score 0 · Answer 3 · answered Sep 03 '18 at 05:29

At first, you need to parse loaded json file, because before parsing, the content is just string and you can not handle it. So please do as below:

function handleJSON(result){
   result = JSON.parse(result); // using json.parse function to convert string to a valid json model.
   jQuery.each(result, printFields);
}

I hope it will be helped you.

Load LOCAL JSON file in an HTML using JS (and jquery and/or AJAX); ANSWER=IMPOSSIBLE

3 Answers3