jquery append（）ul不能與嵌套的$ .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>元素與成就數據附加到<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回調之內。