the Forum

How to get a JSON feed with YouTube and parse using Jquery

Posted on November 2, 2011 by Michael Rosario
Total Posts: 33 | Join date: 03-12-11

So I had to parse and extract a youtube feed and wanted to share a quick tutorial: First, you will need the URL of the feed. Google kindly provided a YouTube tool located at: http://code.google.com/apis/youtube/articles/view_youtube_jsonc_responses.html Once you have the code, you use jQuery and some jSon script to output and parse the results.

[...]
<script>
$(document).ready(function(){
var URL = "http://gdata.youtube.com/feeds/api/users/[USER_HANDLE]/uploads?v=2&alt=jsonc&max-results=5";
$.ajax({
            type: "GET",
            url: URL,
            cache: false,
            dataType:'jsonp',
            success: function(data){
               $.each(data.data.items, function(index) { 
               var myDateArray = this.updated.split("-");
               var date = 1+parseInt(myDateArray[1])+"/"+(myDateArray[2]).toString().substr(0,2)+"/"+myDateArray[0];
               var thumb = this.thumbnail.sqDefault;
               var count = this.viewCount; 
               var title = this.title;
               var link = getAttributeByIndex(this.player, 0); 
$('.feed-youtube .bdy .items').append("<li class='thumb-feature'><div class='img'><a href='"+ link +"'><img src='" + thumb + "' width='120' height='68' alt='" + title + "' /></a></div><div class='text'><h3><a href='" + link + "'>"+title+"</a></h3><p>" + count + " views - added " +  date  + " </p></div></li>");  
    });
   }
  });
});

// Used to get an element from an object
function getAttributeByIndex(obj, index){
  var i = 0;
  for (var attr in obj){
    if (index === i){
      return obj[attr];
    }
    i++;
  }
  return null;
}
   </script>
[...] 

Basically, this outputs the thumbnail and title with links, the viewcount and the date it was updated. Hope this helps!

Tags: There are no tags for this entry.

1 answer, add yours below

Posted on on August 27, 2014 at 10:18am
by Michael Rosario

Alternatively, you can use a search query using the following URL:
http://gdata.youtube.com/feeds/api/videos?q=KEYWORD&alt=json

add your answers here

comments powered by Disqus

Amazon.com Widgets

the Forum

How to get a JSON feed with YouTube and parse using Jquery

1 answer, add yours below

add your answers here

Trending Threads

Tags