从本地JSON文件加载javascript变量后，该变量为“null”或“未定义”

Question

我试图创建一个javascript变量my_jason从JSON文件的内容GunsList.json（两者都存储在我的机器上的同一个文件夹）。

我似乎遇到了OP在这篇文章中遇到的相同问题，当他纠正了有缺陷的JSON文件时，问题得到了解决。考虑到我也有同样的问题，我通过JSONLint运行了我的文件（我假设这是正确的验证），结果它完全恢复正常。

借用本文中的技巧，我尝试使用jQuery来完成它（注意：我在现有代码的其他部分中成功地使用了jQuery），如下所示：

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

当我尝试上述方法（例如，alert（my_json））时，my_json是undefined。

诚然，我对AJAX知之甚少，但我也尝试过：

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

在上面的例子中，my_json是null。

当我将数组作为变量粘贴到js文件中时，我所有引用“gunsList.json”中数组的代码都运行良好，但作为一名初出茅庐的程序员，我真的很兴奋能让它与json一起工作。

Answer 1

以下是原始的$.getJSON（）代码不起作用的原因-注释显示了执行顺序和每个步骤的my_json值：

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 (!)

如您所见，函数在设置my_json值之前返回。

因此，您试图通过在$.ajax（）调用上使用async:false选项来修复它。但这是一个非常糟糕的主意！除非你有很好的理由，否则千万不要使用这个选项：在许多浏览器中，它不仅会挂起你自己的网站，还会挂起所有浏览器选项卡和窗口，直到你的服务器返回数据。

相反，让$. ajax（）或$. getJSON（）调用异步操作，并对回调中或从该回调调用的函数中的数据进行处理。所以，回到您最初的$. getJSON（）代码，您可以这样做：

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