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>元素与成就数据附加到<ul>，其ID为#achs。但是，为了查看成就是否已解锁，我必须检查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 append（）到ul不能使用嵌套的$ .each循环

1 个答案: