Working with Youtube Google API & jQuery

Question

I'm iterating through each li that is generated by the db which produces a youtube link to the video I want to link to So essentially I have this:

<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 need to iterate through each li item, grab the youtube link, grab the video id and then retrieve the JSON data and what the ultimate goal is, is to add an image tag of the thumbnail for that video into the list item for media list

To accomplish this I have this jquery code(Please note using no conflict so $ becomes $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="" />');

    });
});

Where I'm making use of the Youtube API Feed call:

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

For your reference grabytvid is a function that just splits and grabs the video id:

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

Are there any ideas where I'm going wrong here ?

jitter · Accepted Answer · 2010-11-02 22:43:02Z

2

It's simple. You y isn't defined in $j(this).append('<img src="' + y + '" alt="" />'); as you set y only inside the getJSON function

I would do it this way

$("#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="" />');
    });
});

answered Nov 2, 2010 at 22:43

jitter

54.8k11 gold badges114 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Seth Duncan Over a year ago

Went with this technique, it ultimately ended up being a connection issue to googles api(never had a successful json request) but this certainly solved the scope error and grabbing a local self variable referencing this helped me more in the longrun

user425445 · Accepted Answer · 2010-11-02 22:36:46Z

1

Please note that y is not in-scope when you call it:

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

I recommend performing the following change:

var y;

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

});

Hope this helps, Enjoy life.

answered Nov 2, 2010 at 22:36

user425445

1 Comment

Seth Duncan Over a year ago

This also worked and fixed the scope error, but the local variable for this was what had me go with the above answer.

Collectives™ on Stack Overflow

Working with Youtube Google API & jQuery

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related