使用jquery .each外部.getJSON方法

Question

我正在使用json api来创建数据数组。对于每个项目，我想创建一个html块来添加到列表并附加到容器。以下代码有效：

var url = "https://myjsonurl.json",

array = [],

html = "<ul class='card'>";

$.getJSON(url, function( res ) {
    array = res.badges;

    $.each(array, function(index, item) {
        html += "<li>HTMLblock</li>";
    });

    html += "</ul>";

    $("#reportCard").append(html);

});

但是，以下代码不会：

var url = "https://myjsonurl.json",

array = [],

html = "<ul class='card'>";

$.getJSON(url, function( res ) {
    array = res.badges;
});

$.each(array, function(index, item) {
    html += "<li>HTMLblock</li>";
});

html += "</ul>";

$("#reportCard").append(html);

这可能很明显，但我无法理解为什么在.getJSON调用之前声明数组和卡变量时，最后一个例子不起作用？