Travailler avec Youtube Google API et jQuery

Question

J'itérer chaque li qui est généré par le db qui produit un lien youtube la vidéo que je veux créer un lien vers Donc, essentiellement, j'ai ceci:

<ul id="mediaList"> 
    <li> 
     <p>http://www.youtube.com/watch?v=TOm-myVLmKU</p> 
    </li> 
    <li> 
     <p>http://www.youtube.com/watch?v=odNde8wQ5uA</p> 
    </li> 
</ul> 

I besoin de parcourir chaque élément li, récupérer le lien youtube, récupérer l'identifiant de la vidéo, puis récupérer les données JSON et quel est le but ultime, est d'ajouter une balise d'image de la vignette pour cette vidéo dans la liste des médias

Pour ce faire, j'ai ce code jquery (S'il vous plaît noter en n'utilisant pas de conflit donc $ devient $ j):

$j(document).ready(function() { 

$j("#mediaList li").each(function(){ 

    var u = $j(this).find("p").text(); 
    var reqStart = "http://gdata.youtube.com/feeds/api/videos/"; 
    var reqSettings = "?v=2&alt=json-in-script&callback=?"; 
    var vid = grabytvid(u); 

    var request = reqStart + vid + reqSettings; 

    $j.getJSON(request, function(data) { 
     var y = (data.entry["media$group"]["media$thumbnail"][0].url); 

    }); 

    $j(this).append('<img src="' + y + '" alt="" />'); 

    }); 
}); 

Là où je fais l'utilisation de l'API Youtube appel Feed:

http://gdata.youtube.com/feeds/api/videos/[Video_ID_Here]?v=2

Pour votre grabytvid de référence est une fonction qui sépare juste et saisit l'ID vidéo:

function grabytvid(ystring) 
{ 
    var v = ystring.split("=").pop(); 
    return v; 
} 

Y a-t-il des idées où je me trompe ici?

Answer 1

C'est simple. Vous y ne définit pas $j(this).append('<img src="' + y + '" alt="" />'); que vous définissez y seulement à l'intérieur de la fonction getJSON

je le ferais de cette façon

$("#mediaList li").each(function() { 

    var self = this, u = $(this).find("p").text(); 
    var reqStart = "http://gdata.youtube.com/feeds/api/videos/"; 
    var reqSettings = "?v=2&alt=json-in-script&callback=?"; 
    var vid = grabytvid(u); 

    var request = reqStart + vid + reqSettings; 

    $.getJSON(request, function(data) { 
     var y = (data.entry["media$group"]["media$thumbnail"][0].url); 
     $(self).append('<img src="' + y + '" alt="" />'); 
    }); 
}); 

Answer 2

S'il vous plaît noter que y est pas dans le champ lorsque vous l'appelez:

$j(this).append('<img src="' + y + '" alt="" />');

Je recommande d'effectuer les modifications suivantes:

var y; 

$.getJSON(request, function(data) { 
    y = (data.entry["media$group"]["media$thumbnail"][0].url); 

}); 

Hope this helps, Profitez de la vie.