Youtube Gdata example

by deswolf

HTML

<table>
    <tr>
        <th>Nazwa kanału</th>
        <th>Avatar</th>
        <th>Ilość widzów</th>
        <th>Ilość wyświetleń</th>
        <th>Tytuł</th>
    </tr>
    <tr>
        <td><span class="name">raszkad</span></td><td><img src="http://static.mobila.pl/b6/42/james-cameron-s-avatar-68322.large.gif" class="avatar" /></td><td><span class="subscribers"></span></td><td><span class="viewcount"></span></td><td><span class="title"></span></td>
    </tr>
    <tr>
        <td><span class="name">MojeGranie</span></td><td><img src="http://static.mobila.pl/b6/42/james-cameron-s-avatar-68322.large.gif" class="avatar" /></td><td><span class="subscribers"></span></td><td><span class="viewcount"></span></td><td><span class="title"></span></td>
    </tr>
</table>

CSS

table tr td img {
    width: 100px;
    height: 100px;
}

th {border: 1px dotted red;}

JavaScript

$(document).ready(function() {
    var rows = $("table tr");
   
    rows.each(function() {
        var tr = $(this);
        var username = tr.find('.name').text();
        if (username !== "")
        {
            $.ajax("//gdata.youtube.com/feeds/api/users/" + username + "?" +
                   "fields=yt:username,media:thumbnail,title,yt:statistics" +
                   "&alt=json", 
               {
                   dataType: "json",
                   success: function(response) {
                      tr.find('.subscribers').text(response.entry.yt$statistics.subscriberCount);
                       tr.find('.viewcount').text(response.entry.yt$statistics.totalUploadViews);
                       tr.find('.title').text(response.entry.title.$t);
                       tr.find('.avatar').attr('src', response.entry.media$thumbnail.url);
                   }
               }
            );
            
        }
    });
});