jQuery.getJSON() – How to Read a Local File

javascriptjqueryjsonlocal-files

How do you read a file in the current directory using JQuery.getJSON()?

I'm trying something simple (with my data.json file in the same directory as my html file):

$.getJSON("./data.json")

and I get the error:

XMLHttpRequest cannot load file:///C:/Projects/test/data.json. Origin null is not allowed by Access-Control-Allow-Origin.

I've tried all sorts of combinations of path, but it doesn't seem to work…

EDIT: I'm using Chrome, but I'd like to work in all browsers…

If you are using Google Chrome, it is intentional that AJAX on file:/// paths never works.

$.getJSON is asynchronous so you should do:

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

getJSON will parse it for you.

Just remove the var obj = $.parseJSON(json); line (since that will stringify the object and try to parse it as JSON (which it won't be)).