Javascript - getJSON to fetch data from local file

Question

I have a data structure contained in a local Json file. I want to load it using $.getJSON().

json file locations.json:

{locations:
    [{value: "Port Kelang",label: "Port Kelang",category: "Malaysia"},
     {value: "Pusan",label: "Pusan",category: "South Corea"},
     {value: "Qingdao",label: "Qingdao",category: "China"}]}

javascript file :

    $.getJSON("locations.json", function(data){
          //do something
    });

Using Chrome, I got an error :

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

While I got another error in Firefox :

XML Parsing Error: not well-formed Location: file:///E:/locations.json Line Number 1, Column 1:

Any help? Thanks in advance.

Possible duplicate of [Ajax in Jquery does not work from local file](http://stackoverflow.com/questions/17947971/ajax-in-jquery-does-not-work-from-local-file) — Heretic Monkey, Mar 10 '17 at 15:35
If you read Chrome's error message, it's telling you what's wrong. Also, your JSON is not well-formed, as Firefox is telling you. Property names must be quoted. See http://json.org/ — Heretic Monkey, Mar 10 '17 at 15:37
@MikeMcCaughan In fact, I got the same error in Firefox even if the property names are quoted. — mercyforever, Mar 10 '17 at 15:44
... then there's something else wrong with your JSON. Use a linting tool like http://jsonlint.com/ to make sure your JSON is JSON. — Heretic Monkey, Mar 10 '17 at 15:45

score 0 · Answer 1 · answered Mar 10 '17 at 15:35

for security reason, browsers don't allow cross origin request. I've face that issue while developping in local. That's an issue you wont have on remote server. what i did, i disabled the same origin policy in my browser: execute that if you are on mac:

 open -a Google\ Chrome --args --disable-web-security -–allow-file-access-from-files

and this if you are on window:

"C:\PathTo\Chrome.exe" –allow-file-access-from-files -disable-web-security

Javascript - getJSON to fetch data from local file

1 Answers1