CODEWITHSUNDEEP
javascriptjqueryxmlyoutube
Nick
Nick

Reputation: 213

Issue grabbing video Id from Youtube feed xml using jquery

Ok, from what I understand, what I am trying to accomplish here is SUPER simple, basically I have constucted a search result out of a url string with the youtube API. If you browse to the url, you can see the xml returned, all is good. The url:

https://gdata.youtube.com/feeds/api/videos?q=all the small things&max-results=1&v=2&format=5&orderby=relevance&safeSearch=none

I have written a bit of jquery that should fill my div called agenda (<div id = "agenda">) which DOES exist in the html with, with the data that is in the <yt:videoid> xml element. Just to fill the div with the video ID, essentially. Here is my jQuery:

$(document).ready(function(){
    $.get("https://gdata.youtube.com/feeds/api/videos?q=all the small thing&max-results=1&v=2&format=5&orderby=relevance&safeSearch=none",{},function(xml){
        $('entry',xml).each(function(i){
            var vidID = $(this).find("yt:videoid").text();
        });//end find entry

        alert(vidID);
        $('#agenda').html(vidID);
    });//end ajax   
});//end .ready

However literally nothing is happening, the alert does not go off, in fact it throws an error that vidID is undefined, from what I can tell EVERYTHING is set up the way it should be, I'll post the link if someone really needs to see it live, but currently it is on my raspberry pi server, so im not nuts about posting my IP, but I'm that desperate :p. If anyone can spot what I'm doing wrong I have been at this for hours and it's driving me nuts. Thanks in advance.

Upvotes: 0

Views: 530

Answers (1)

PSL
PSL

Reputation: 123739

I am not sure what the format of data exactly is but issue is that your vId scope is only inside the $.each function. SO you need to move it out of the each block to be able to access its value. Next thing is if the node entry is going to be only 1 you can get rid of each.

Try 

$(document).ready(function(){
    $.get("https://gdata.youtube.com/feeds/api/videos?q=all the small thing&max-results=1&v=2&format=5&orderby=relevance&safeSearch=none",{},function(xml){
        var vidID;       
        $('entry',xml).each(function(i){
           vidID  = $(this).find('id').text();
        });//end find entry
      alert(vidID);
        $('#agenda').html(vidID);
    });//end ajax   
});//end .ready

or

$(document).ready(function () {
    $.get("https://gdata.youtube.com/feeds/api/videos?q=all the small thing&max-results=1&v=2&format=5&orderby=relevance&safeSearch=none", {}, function (xml) {
        var vidID = $('entry', xml).find('id').text();
        alert(vidID);
        $('#agenda').html(vidID);
    }); //end ajax   
}); //end .ready

Fiddle

Use JSON-C format for you tube data which is easy to manipulate Example:- in your url just need to add alt=jsonc

https://gdata.youtube.com/feeds/api/videos?q=all%20the%20small%20thing&max-results=1&v=2&format=5&orderby=relevance&safeSearch=none&alt=jsonc

and loop through json if you need:- here in the example there is only one so i am just using json.data.item[0]. You will ideally loop though item.

$(document).ready(function () {
    $.get("http://gdata.youtube.com/feeds/api/videos?q=all%20the%20small%20thing&max-results=1&v=2&format=5&orderby=relevance&safeSearch=none&alt=jsonc", {}, function (json) {
      var vidID = json.data.items[0].id;
        alert(vidID);
        $('#agenda').html(vidID);
    }); //end ajax   
}); //end .ready

Fiddle

Upvotes: 1

Related Questions