Load json file in local project without using webserver

Question

I try to load a json file from my local project which is not running on a webserver.

test.json

[{
    name : "Google",
    url : "https://www.google.com",
},
{
    name : "Bing",
    url : "https://www.bing.com",                            
}]

First attempt:

First I tried it by using the local file which is inside the project folder.

loadJSON("data/test.json", function(response) {

    console.log(JSON.parse(response));
});

function loadJSON(path, callback) {   

var xobj = new XMLHttpRequest();

    xobj.overrideMimeType("application/json");
    xobj.open('GET', path, true); // Replace 'my_data' with the path to your file
    xobj.onreadystatechange = function () {
        if (xobj.readyState == 4 && xobj.status == "200") {
            // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
            callback(xobj.responseText);
        }
    };
    xobj.send(null);  
}

Response:

index.html:616 Failed to load file:///C:/wamp64/www/projects/Startseite/data/test.json: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Then I researched the error, set up a virtual host and changed the call to this:

loadJSON("http://ressources/data/test.json", function(response) {

    console.log(JSON.parse(response));
});

Response:

Failed to load http://ressources/data/test.json: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Is it even possible to load json without using a webserver or installing browser plugins which changes the header?

Brain Foo Long · Accepted Answer · 2018-05-03T12:48:33.437

1

As for JSON you can use JSONP, it's designed for cross-domain and for every url, absolute or relative.

https://www.w3schools.com/js/js_json_jsonp.asp and http://api.jquery.com/jquery.getjson/

test.html

<script>
    function jsonp(data){
      console.log(data)
    }
</script>
<script src="test.js"></script>

test.js

jsonp([{
  name : "Google",
  url : "https://www.google.com",
},
  {
    name : "Bing",
    url : "https://www.bing.com",
  }])

edited May 03 '18 at 12:48

answered May 03 '18 at 12:05

Brain Foo Long

2,057
23
28

It seems like this does only work together with a webserver. – Black May 03 '18 at 12:19
@Black it is not required, see modified answer, i've tested it. – Brain Foo Long May 03 '18 at 12:48
but this is a javascript file not a json file. How can I add new objects to the json object now? – Black May 03 '18 at 12:51
@Black The naming of the file doesnt matter. Just generate any javascript array that you want. Than wrap it around a function call. That's jsonp. I'm out here, nothing more i can provide to you. Maybe it doesn't fit your needs, but thats the only way doing this without a webserver. – Brain Foo Long May 03 '18 at 13:01

score 0 · Answer 2 · answered May 03 '18 at 11:37

When running javascript on browser I think its impossible to access a file from your filesystem without webservers. If you just wanted to process these files using javascript you can do so by running javascript on your machine using node. Otherwise I am not aware of any other ways, but you may want to take a look at this :

Local file access with javascript

score 0 · Answer 3 · answered May 03 '18 at 11:39

you can't do it like that. If you can't add a web server, one option is to move JSON data into separate .js file. Since your JSON file looks like this:

    [{
        name : "Customer Support OTRS",
        url : "https://support.hecht-international.com",
        desc : "<strong>Customer Support OTRS</strong><br><br>Callagent<br>online",
        img : "img/otrs_thumb.PNG",
    },
{
        name : "hechtAbasConverter",
        url : "https://hac.hecht-international.com/gui/login.php",
        desc : "<strong>hechtAbasConverter - hac</strong><br><br>online",                            
        img : "img/easylife/hac.png",
    }]

move it to jsondata.js

var jsonData = [{
        name : "Customer Support OTRS",
        url : "https://support.hecht-international.com",
        desc : "<strong>Customer Support OTRS</strong><br><br>Callagent<br>online",
        img : "img/otrs_thumb.PNG",
    },
    {
        name : "hechtAbasConverter",
        url : "https://hac.hecht-international.com/gui/login.php",
        desc : "<strong>hechtAbasConverter - hac</strong><br><br>online",                            
        img : "img/easylife/hac.png",
    }]

and load your new file in HTML

<script type="text/javascript" src="path/to/jsondata.js"></script>

Load json file in local project without using webserver

3 Answers3