Bouclage via plusieurs requêtes JSON (YouTube Data API)

Question

Une partie d'un site Web sur lequel je travaille est une page vidéo. Je retire les vidéos d'un compte YouTube en accédant à l'API YouTube Data. Saisir les vidéos dans aucun ordre particulier et non triés fonctionne très bien, mais quand j'essaie de les classer par catégories, je commence à avoir des problèmes. Disons qu'il y a trois catégories: Fruits, Légumes, Animaux. Au lieu de saisir toutes les vidéos à la fois, je veux saisir toutes les vidéos marquées avec des fruits, les ajouter à un <ul id="Fruit">. Ensuite, demander toutes les vidéos marquées avec des légumes, etc

Lors du démarrage, j'ai eu l'alerte du navigateur quand il avait fini d'obtenir la demande, puis en ajoutant la liste appropriée. Après avoir sorti l'alerte, ça a quand même fonctionné, mais pas comme je m'y attendais. Soit la boucle avance trop vite, soit pas du tout, mais je n'arrive pas à repérer l'erreur. Ce qui finit par arriver, c'est que toutes les vidéos sont placées dans une seule liste, <ul id="Vegetable">.

Veuillez noter: J'utilise un plugin appelé jGFeed qui enveloppe la fonction jQuery getJSON, donc je crois que vous pouvez le traiter comme tel.

var videoCategories = ['Fruit', 'Vegetable', 'Pets']; 

for (var i = 0; i < videoCategories.length; i++) { 
    var thisCategory = videoCategories[i]; 
    $.jGFeed('http://gdata.youtube.com/feeds/api/users/username/uploads?category='+thisCategory, 
    //Do something with the returned data 
    function(feeds) { 
     // Check for errors 
     if(!feeds) { 
     return false; 
     } else { 
     for(var j=0; j < feeds.entries.length(); j++) { 
      var entry = feeds.entries[i]; 
      var videoUrl = entry.link; 
      $('ul#'+thisCategory).append('<li><a href="#" id="'+videoUrl+'">'+entry.title+'</a></li>'); 
     } 
     }); 
} 

Answer 1

Le problème est que vous utilisez la variable 'thisCategory' pour définir le nom de la catégorie. Le problème est, la valeur si cette variable change, pendant que vous attendez une réponse du serveur.

Vous pouvez essayer de mettre tout le script dans une fonction:

var videoCategories = ['Fruit', 'Vegetable', 'Pets']; 

for (var i = 0; i < videoCategories.length; i++) { 
    getCategory(videoCategories[i]); 
} 

function getCategory(thisCategory) 
{ 

    $.jGFeed('http://gdata.youtube.com/feeds/api/users/username/uploads?category='+thisCategory, 
    //Do something with the returned data 
    function(feeds) { 
     // Check for errors 
     if(!feeds) { 
     return false; 
     } else { 
     for(var j=0; j < feeds.entries.length(); j++) { 
      var entry = feeds.entries[i]; 
      var videoUrl = entry.link; 
      $('ul#'+thisCategory).append('<li><a href="#" id="'+videoUrl+'">'+entry.title+'</a></li>'); 
     } 
     }); 
} 

Je n'ai pas testé, donc je ne suis pas sûr que cela fonctionne ..