JSON Parse File Path

Question

I'm stuck trying to get the correct path to the local file. I have the following directories:

Resources ->
   data ->
       file.json
   js ->
     folder ->
        script.js
   html ->
      folder ->
         file1.html

I'm executing script.js from file1.html, with js code:

var answers = JSON.parse('../../data/file.json');
alert(answers);

But it doesn't work, even alert is not starting. What is wrong?

Also I've tried this:

function readJSON(file) {
    var request = new XMLHttpRequest();
    request.open('GET', file, false);
    request.send(null);
    if (request.status == 200)
        return request.responseText;
};

var temp = readJSON('../../data/file.json');
alert(temp);

Alert undefined in this case.

Solution 1

Since it is in the directory data/, You need to do:

file path is '../../data/file.json'

$.getJSON('../../data/file.json', function(data) {         
    alert(data);
});

Pure JS:

   var request = new XMLHttpRequest();
   request.open("GET", "../../data/file.json", false);
   request.send(null)
   var my_JSON_object = JSON.parse(request.responseText);
   alert (my_JSON_object.result[0]);

Solution 2

This solution uses an Asynchronous call. It will likely work better than a synchronous solution.

var request = new XMLHttpRequest();
request.open("GET", "../../data/file.json", false);
request.send(null);
request.onreadystatechange = function() {
  if ( request.readyState === 4 && request.status === 200 ) {
    var my_JSON_object = JSON.parse(request.responseText);
    console.log(my_JSON_object);
  }
}

Solution 3

Loading local JSON file

Use something like this

$.getJSON("../../data/file.json", function(json) {
    console.log(json); // this will show the info in firebug console 
    alert(json);
});

Solution 4

var request = new XMLHttpRequest();
request.open("GET","<path_to_file>", false);
request.send(null);
var jsonData = JSON.parse(request.responseText);

This code worked for me.

View more solutions

Comments

[Paul S.]

Alert undefined for me., what was the status, did it produce an error in your console?

[jagger]

Finally, if (request.status == 200) made issues for me. It gives 0 even if it finds the file. If i delete it, all is ok. Thanks for everyone!

[Paul S.]

I didn't realise you could pass a URI to JSON.parse and have it perform a REQUEST for you, where is this documented?

[karthikr]

yeah.. edit was on the way.. guess should have answered after the fact

[jagger]

Actually, i make it in titanium webview, so normally resources should be root path. If i make document.location.pathname and start in browser i will for sure get file:/// ...

[jagger]

for your pure js alert is not starting also

[Fabien Snauwaert]

my_JSON_object.result is undefined. You would access the Javascript created from the JSON file through my_JSON_object directly instead.

[O. Jones]

Welcome to SO. Good answer. I edited it because it's best when an answer stands alone. Dialogue about other answers is appropriate in comments.

[Evorlor]

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check xhr.spec.whatwg.org.

[Todd]

@Evorlor Change the false on line 2 to true. Otherwise it's a synchronous operation.

[Dagrooms]

XMLHttpRequest cannot load file:///.../data.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

[Gaurav]

I get this same XMLHttpRequest error when developing locally. Are there any non-network calls to load the local JSON file and parse it for use within client-side JavaScript?

[Timo]

Did not work for me, but solution below with the asynchronous check if the json is ready worked. I get without it an unexpected end of JSON input error which tells me that the json parse starts but does not finish before the next order starts.

[Timo]

@Evorlor here is a closer link to what you are writing that one should use async and not sync.

[Timo]

.. but does not work for me, see my comments to the other posts.

[Timo]

This example is too far away from the question I think. An example should be used without any effort and here, I need l var to work with it. Welcome to SO.

[Timo]

.. but does not work for me, see my comments to the other posts. And .. what is the added value here compared to this? Looks like copy-paste. Welcome to SO.