Parse JSON File in Javascript

Question

I have a JSON file stored in the same folder as an HTML file for a webpage I'm working on. This HTML file has a script with a function that takes data in a variable in JSON form. I'm having trouble getting the contents of the JSON file into a variable in my HTML file to be used by the function. I am running the HTML file locally.

I've tried the following:

$(function(){
    $.getJSON("./data.json", function(jsdata) {
        json = jsdata;
        console.log(json);
    });
});

However, it only results in: XMLHttpRequest cannot load file. Is there any way to parse a local JSON file in Javascript?

The JSON was validated using http://jsonlint.com/

Using "data.json" gives the same error as before.

It depends on your location of you Javascript file where you call this getJSON function. If the JS code is within the same level of the json file then indeed remove the . other wise ../ should do the trick — Rotan075
– Rotan075, Commented Jun 4, 2015 at 14:22
check in tool xrs request and check if file is json valid in validator — daremachine
– daremachine, Commented Jun 4, 2015 at 14:22
Does it make any difference that I am not hosting the file? I'm running the HTML locally. — Dagrooms
– Dagrooms, Commented Jun 4, 2015 at 14:27

Donal · Accepted Answer · 2015-06-04 14:22:30Z

3

Do not use a .. If the json file is in the same folder as the location your js is running (i.e. your html file), it should be this:

$(function(){
    $.getJSON("data.json", function(jsdata) {
        json = jsdata;
        console.log(json);
    });
});

answered Jun 4, 2015 at 14:22

Donal

33.2k10 gold badges69 silver badges75 bronze badges

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

3 Comments

Dagrooms Over a year ago

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

Donal Over a year ago

You need to run your html from a website - not from the from a directory on the file system. For more info, see here: stackoverflow.com/questions/371875/…

Dagrooms Over a year ago

Good to know. I get the noob of the day award.

Akash Rajbanshi · Accepted Answer · 2015-06-04 14:32:56Z

2

You cannot load a local file using $.getJSON in jquery. You have to set a valid url of your file inside of your project, not a local file path because browser prevents it from loading for some security reason.

answered Jun 4, 2015 at 14:32

Akash Rajbanshi

1,60314 silver badges23 bronze badges

Comments

PHP Worm... · Accepted Answer · 2015-06-04 14:22:23Z

1

Dot in the url is causing the problem

Use this:

$.getJSON("/data.json", function(jsdata) { 
        json = jsdata;
        console.log(json);
    });

answered Jun 4, 2015 at 14:22

PHP Worm...

4,2341 gold badge28 silver badges48 bronze badges

1 Comment

Dagrooms Over a year ago

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

Tushar · Accepted Answer · 2015-06-04 14:26:18Z

1

The URL provided is wrong.

Use following:

$(function () {
    var baseUrl = 'http://....'; // Your base url of app

    // Use the absolute URL in here
    $.getJSON( baseUrl + "/data.json", function (jsdata) {
        json = jsdata;
        console.log(json);
    });
});

answered Jun 4, 2015 at 14:26

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

Comments

Parag Bhayani · Accepted Answer · 2015-06-04 14:25:48Z

0

try this code

$.ajax({
    url: "./data.json", // or "/data.json",
    type: "GET",
    dataType: "json"
})

answered Jun 4, 2015 at 14:25

Parag Bhayani

3,3302 gold badges32 silver badges53 bronze badges

Collectives™ on Stack Overflow

Parse JSON File in Javascript

5 Answers 5

3 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related