Load a JSON file in local system using jQuery/Javascript

Question

I am new to scripting languages. I have a new.json file and I want to load in gary.html HTML file. I do not want to run gary.html file on server. I want to run it locally on my machine.

When my HTML file loads the new.json file using $.getJSON, I get a blank screen and when I checked on console I get the error:

jquery-3.1.0.js:9392 XMLHttpRequest cannot load file:///C:/Users/Gary/Desktop/new.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.`

and this my loading code

function show() {
    //read(a)
    var myItems;

    $.getJSON('new.json', function(data) {
        myItems = data.a;
        read(myItems)
    });
}

When I googled for this error, people suggest to me run this file on firefox, or execute this chrome --allow-file-access-from-files. The file is loading in firefox and when I am executing the chrome --allow-file-access-from-files, the File also loads in chrome.

My main concern is that when I distribute the new.json and gary.html file to others then others may or may not have firefox or chrome's chrome --allow-file-access-from-files permission. I just want user to click on gary.html and it loads the data of new.json file.

How can I achieve that?

As you've seen - you can't make AJAX requests to the local filesystem as it's a huge security issue. The only workaround for this is for the user to manually enable settings in their browser (which is not a great idea anyway). If you do not want this then you will have to use a central server for all requests. The alternative is to include the new.json file in the page using an extra <script /> tag — Rory McCrossan
– Rory McCrossan, Commented Aug 11, 2016 at 8:43
Then change new.json to assign the object to a variable which you can parse and access as you normally would any standard object without the need for the AJAX call — Rory McCrossan
– Rory McCrossan, Commented Aug 11, 2016 at 8:51
@RoryMcCrossan, How can I dot that. My json file looks like this: {"a": [ {"name":"avc"}, {"name":"Anna"}, {"name":"Peter"}]} — CLIX159
– CLIX159, Commented Aug 11, 2016 at 8:54
You can assign the json in a variable in new.json as : var data = {"a": [ {"name":"avc"}, {"name":"Anna"}, {"name":"Peter"}]} and you may access data.a directly without invoking $.getJSON api — Dhananjaya Kuppu
– Dhananjaya Kuppu, Commented Aug 11, 2016 at 8:57

Rory McCrossan · Accepted Answer · 2016-08-11 09:03:45Z

2

As you've seen - you can't make AJAX requests to the local filesystem as it's a huge security issue. The only workaround for this is for the user to manually enable settings in their browser (which is not a great idea anyway). If you do not want this then you will have to use a central server for all requests.

The alternative is to avoid using AJAX by including the new.json file in the page using an extra <script /> tag. You will also need to assign the object to a variable in the file, something like this:

// new.json
var newJson = {"a": [{"name":"avc"}, {"name":"Anna"}, {"name":"Peter"}]}

Then in gary.html:

<head>
    <script src="jquery.js"></script>
    <script src="new.json"></script>
    <script>
        $(function() {
            newJson.a.forEach(function(item) {
                console.log(item.name);
            });
        })
    </script>
</head>

answered Aug 11, 2016 at 9:03

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

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

1 Comment

CLIX159 Over a year ago

Are yor sure? Can we do in this way?

Rahul Malu · Accepted Answer · 2016-08-11 10:11:53Z

1

You can't make AJAX requests to the local filesystem as it's a huge security issue. Why cant you directly include the JSON data in HTML file directly. You wont have to make AJAX call to fetch the JSON.

<head>
<script>
var jsonData = '{"a": [{"name":"avc"}, {"name":"Anna"}, {"name":"Peter"}]}';
for(var i=0; i< jsonData.a.length;i++)
{
var item = jsonData.a[i];
console.log(item.name);
}
</script>
</head>

answered Aug 11, 2016 at 10:11

Rahul Malu

5662 silver badges9 bronze badges

Collectives™ on Stack Overflow

Load a JSON file in local system using jQuery/Javascript

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related