JSON read a local file using JavaScript (similar questions Stack overflow didnt help)

Question

I am trying to read a local .JSON file and use JSON.parse to put it into a Javascript array. Any other piece of example code would also help. I am unable to do it using the following code, its not able to load a local file.

var xmlhttp = new XMLHttpRequest();
//xmlhttp.overrideMimeType("application/json"); //this line also didnt help
var url = "sample.json";
xmlhttp.open("GET", url, true);
xmlhttp.onreadystatechange = function() {

    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        testme(xmlhttp.responseText);
    }
};
xmlhttp.send(); 

function testme(response){

    var record = JSON.parse(response);
    var out = "<table>";

    for(var i = 0; i < record.length; i++) { //prints all the data to html
        out += "<tr><td>" +
        record[i].Name +
        "</td><td>" +
        record[i].City +
        "</td><td>" +
        record[i].Country +
        "</td></tr>";
    }
    out += "</table>";
    document.getElementById("dis").innerHTML = out;
}

the following errors occur

XMLHttpRequest cannot load file:///C:/Practice/CMPE%20273%20refresher/json/Sample.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.transmit1 @ JSON.js:36transmit @ JSON.js:41onclick @ jsonweb.html:11

JSON.js:36 Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///C:/Practice/CMPE%20273%20refresher/json/Sample.json'.

If you want to read file simple.json from your file system then you need servlet URL not url as "simple.json". — Rahul Ahirrao
– Rahul Ahirrao, Commented Sep 4, 2015 at 6:12

taxicala · Accepted Answer · 2015-09-03 23:22:49Z

1

You are running the script with the file:// protocol. you won't be able to perform that request with this protocol. you need to install a http server in order to be able to perform the request (even if it's everything in your computer).

there are many lightweight http servers to choose from or you can install nodejs or a xampp/wampp server.

answered Sep 3, 2015 at 23:22

taxicala

21.8k7 gold badges41 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ankit Rajput Over a year ago

can't it be done without installing server. Can I upload this ".json" file to dropbox and give the url. Would it work then? coz it will be at server then I guess

Ankit Rajput Over a year ago

I actually do it without installing the server. How can i do it? read a local .json file. Its actually my course assignment.

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

Hey your URL is not correct. Please ref this

xmlhttp.open("GET", url,true);

Specifies the type of request, the URL, and if the request should be handled asynchronously or not.

method: the type of request: GET or POST
url: the location of the file on the server
async: true (asynchronous) or false (synchronous)

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 4, 2015 at 6:17

Rahul Ahirrao

3193 silver badges10 bronze badges

1 Comment

Endless Over a year ago

Should mention that async is depricated and bad

Community · Accepted Answer · 2017-05-23 11:53:02Z

0

If you're using a compliant HTML5 browser you can use the FileReader API.
See https://stackoverflow.com/a/40946430/2476389

edited May 23, 2017 at 11:53

CommunityBot

11 silver badge

answered Dec 7, 2016 at 1:03

biomiker

3,3161 gold badge31 silver badges27 bronze badges

Collectives™ on Stack Overflow

JSON read a local file using JavaScript (similar questions Stack overflow didnt help)

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related