Jquery append() to ul 不能使用嵌套的 $.each 循环

Question

我目前在使用带有 json 数据的 JQuery 将计算出的 <li> 元素附加到 <ul> 时遇到问题。这是我的代码：

$.getJSON("http://api.hivemc.com/v1/game/timv", function(data) {

        $.each(data.achievements, function(key,value){

            var unlocked = "Locked";

            $.each(maindata.achievements, function(key2,value2){
                if(value.name == key2){
                    unlocked = "Unlocked";
                }
            });

            $("#achs").append("<li><p>" + value.publicname + "</p><span>"+ unlocked + "</span></li>");
        });
    });

如您所见，我从 URL 获取 JSON 数据。在这里面，有一个阵型的成就。变量 maindata 是之前从另一个 $.getJSON() 设置的。

对于每个成就，我必须将带有成就数据的<li> 元素附加到ID 为#achs 的<ul>。但是，为了查看成就是否已解锁，我必须检查 maindata JSON 中的成就名称，这意味着当前 $.each() 循环中的另一个 $.each() 循环。

没有额外的循环，代码可以正常工作，并成功形成成就列表以及它们是否已解锁。但是，每当我再次添加额外的 $.each() 时，它仅在我重新加载页面或返回并再次返回时才有效。

有人知道为什么会这样吗？任何帮助将不胜感激，因为我相信您可以看到我对 JQuery 不是很有经验。此外，我已经能够仅使用 PHP 来执行此操作，检索 JSON 数据，但我想看看使用 JQuery 是否会比 PHP 加载更快。

maindata JSON 是从此代码中检索到的：`var maindata;

    $.getJSON("http://api.hivemc.com/v1/player/" + $user + "/timv", function(data) {
        $('#1').text(data.total_points);
        $('#2').text(data.i_points);
        $('#3').text(data.t_points);
        $('#4').text(data.d_points);
        $('#5').text(data.role_points);
        $('#6').text(data.most_points);

        maindata = data;

        if(data.detectivebook == true)
            $('#7').text("Yes");
        else
            $('#7').text("No");

        $flare = data.active_flareupgrade;
        $flare = $flare.charAt(0).toUpperCase() + $flare.slice(1).toLowerCase();
        $('#8').text($flare);
        $('#9').text(data.title);
        var d = new Date(data.lastlogin * 1000);
        var n = d.toISOString(); 
        $('#10').text(d.getDate() + "/" + d.getMonth() + "/" + d.getFullYear());

        $.getJSON("http://api.hivemc.com/v1/game/timv", function(data2) {

        $.each(data2.achievements, function(key,value){

            var unlocked = "Locked";

            $.each(maindata.achievements, function(key2,value2){
                if(value.name == key2){
                    unlocked = "Unlocked";
                }
            });

            $("#achs").append("<li><p>" + value.publicname + "</p><span>"+ unlocked + "</span></li>");
        });
    });
    });`

谢谢。

Answer 1

您应该等待之前的 AJAX 调用完成，然后再根据两个调用的结果进行任何处理：

var promise1 = $.getJSON(...);     // get maindata
var promise2 = $.getJSON(...);     // get data

$.when(promise1, promise2).then(function(maindata, data) {
    // do your processing here
    ...
});

注意：无需为 $.getJSON 调用提供回调 - 在 .then 回调中进行处理。