Jquery 对 ul 的 append() 不适用于嵌套的 $.each 循环

Question

我目前在使用 JQuery 和 json 数据将计算出的 <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 回调中进行处理。

Jquery 对 ul 的 append() 不适用于嵌套的 $.each 循环

Jquery append() to ul not working with nested $.each loops

javascript

each

jquery

json

loading