从本地JSON文件加载后，javascript变量为“ null”或“ undefined”

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 (eg, 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.

Answer 1

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
});