javascript variable is 'null' or 'undefined' after loading it from a local JSON file

Question

I'm trying to create a javascript variable my_jason from the contents of a JSON file "gunsList.json" (both are stored within the same folder on my machine).

I seem to be having the same issue that the OP had in this post, which was resolved when he corrected his flawed JSON file. Thinking I have the same issue, I ran my file through JSONLint (I'm assuming that's proper validation), and it came back clean.

Borrowing tips from this post, I tried using jQuery to get it done (note: I'm using jQuery successfully in other parts of the existing code), as follows:

var my_json;
$.getJSON('gunList.json', function(json) {
my_json = json;
});

When I try the method above (e.g., alert(my_json)), my_json is undefined.

Admittedly, I know very little about AJAX, but I also tried:

var my_json = (function () {
    var my_json = null;
    $.ajax({
        'async': false,
        'global': false,
        'url': 'gunsList.json',
        'dataType': "json",
        'success': function (data) {
            my_json = data;
        }
    });
    return my_json;
})();

In the case above, my_json is null.

All my code that references the array within "gunsList.json" when I paste it in as a variable in my js file runs fine, but as a fledgling programmer, I'd be really excited about getting it to work with JSON.

1) Where and when are you doing the alert? Try it in the callback itself. 2) Provide an error handler for your $.ajax call and see if it's getting called. — Matt Burland
– Matt Burland, Commented May 23, 2013 at 2:44
is there an error in the browser console? one reason could be the ajax request is failed and error callback is called — Arun P Johny
– Arun P Johny, Commented May 23, 2013 at 2:45
It looks fine to me otherwise plnkr.co/edit/O1GB5untrFh82KtaUJuk?p=preview — Arun P Johny
– Arun P Johny, Commented May 23, 2013 at 2:48

Michael Geary · Accepted Answer · 2013-05-23 03:00:16Z

5

Here's why your original $.getJSON() code didn't work - the comments show the order of execution and the value of my_json at each step:

var my_json;
// 1 - my_json is undefined
$.getJSON('gunList.json', function(json) {
    // 3 (!)
    my_json = json;
    // 4 - my_json now has the JSON data
});
// 2 - my_json is undefined (!)

As you can see, the function returns before the my_json value is set.

So you tried to fix it by using the async: false option on a $.ajax() call instead. But that is a very bad idea! Never use that option unless you have a very good reason for it: in many browsers, it will hang up not just your own site but all browser tabs and windows until your server returns the data.

Instead, let the $.ajax() or $.getJSON() call operate asynchronously, and do something with the data in the callback or in a function that you call from that callback. So, going back to your original $.getJSON() code, you can do this:

$.getJSON( 'gunList.json', function( json ) {
    // Do stuff with JSON data here, or call a function here and
    // pass the data to it as an argument
});

edited May 23, 2013 at 3:00

answered May 23, 2013 at 2:45

Michael Geary

29k9 gold badges67 silver badges77 bronze badges

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

3 Comments

Arun P Johny Over a year ago

no, he has set the flag async to false that means it is not processed as an async request

Michael Geary Over a year ago

@ArunPJohny - Ah, I missed that, thanks for pointing it out. Updated the answer to reflect that.

Remo Williams Over a year ago

Thanks Michael and company!

Collectives™ on Stack Overflow

javascript variable is 'null' or 'undefined' after loading it from a local JSON file

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related