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

Question

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

我似乎遇到了与 OP 在this post 中相同的问题，当他更正了他有缺陷的 JSON 文件时，这个问题得到了解决。认为我有同样的问题，我通过 JSONLint 运行我的文件（我假设这是正确的验证），它回来了。

借鉴this post的技巧，我尝试使用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。

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

Answer 1

这就是您原来的 $.getJSON() 代码不起作用的原因 - cmets 在每个步骤中显示执行顺序和 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
});