Jquery append() à ul ne fonctionne pas avec les boucles $ .each imbriquées

Question

Je rencontre actuellement un problème avec l'utilisation de JQuery avec des données json pour ajouter une quantité calculée d'éléments <li> à un <ul>. Voici mon code:

$.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>"); 
     }); 
    }); 

Comme vous pouvez le voir, j'obtiens des données JSON d'une URL. En cela, il y a un tableau réalisations. La variable maindata a été définie plus tôt à partir d'un autre $ .getJSON().

Pour chaque réalisation, je dois ajouter un élément <li> avec les données de la réalisation à un <ul> qui a l'ID de #achs. Cependant, afin de voir si la réalisation est débloquée, je dois vérifier le nom des réalisations dans le JSON maindata, ce qui signifie une autre boucle $ .each() dans la boucle $ .each() en cours.

Sans la boucle supplémentaire, le code fonctionne bien, et forme avec succès une liste de réalisations et si elles sont déverrouillées ou non. Cependant, chaque fois que j'ajoute à nouveau le $ .each(), cela ne fonctionne que lorsque je recharge la page ou que je reviens sur cette page.

Est-ce que quelqu'un sait pourquoi cela se produit? Toute aide serait grandement appréciée car je suis sûr que vous pouvez voir que je ne suis pas très expérimenté avec JQuery. En outre, j'ai été capable de le faire avec PHP, en récupérant des données JSON, mais je voulais voir si utiliser JQuery serait plus rapide que PHP.

Le JSON maindata est récupéré à partir de ce code: `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>"); 
     }); 
    }); 
    });` 

Merci.

Answer 1

Vous devez attendre votre appel AJAX plus tôt pour terminer avant de faire tout traitement qui dépend des résultats des deux appels:

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

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

NB: il n'y a pas besoin de fournir callbacks aux $.getJSON appels - effectuer le traitement dans le rappel .then.