Home/ Questions/Q 8067623
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T12:23:08+00:00

I’m very new to js and jQuery, pardon my bad code. Trying to dynamically

  • 0

I’m very new to js and jQuery, pardon my bad code. Trying to dynamically generate a formatted table of YouTube thumbnails/urls from a keyword query. Thumbnails need to be wrapped in an tag with fancybox class settings to trigger a fancybox player. I’m setting all the necessary ‘a’ and ‘img’ tags as vars and just trying to parse the JSON feed for video IDs, plug those into the url and thumbnail templates and then generate a table that starts a new row of thumbs after every 9 cells.

Here’s my code. Right now it only generates a single column and keeps repeating the same IDs and adding a new one every iteration. Any help is hugely appreciated!

<script type="text/javascript">

    var vidCell1 = '<a class="fancybox-media" href="https://www.youtube.com/watch?v=';
    var vidCell2 = '"><img src="http://i.ytimg.com/vi/';
    var vidCell3 = '/hqdefault.jpg" width="100" alt="" /></a>';
    var mytablebody = '<tbody><tr>';
    var ti;
    var id;

    $.getJSON("https://gdata.youtube.com/feeds/api/videos?q=mirthkon&v=2&alt=jsonc",function(youtubeJSON) {

        ti = youtubeJSON.data.totalItems;    
        for (var i=0; i<=ti; i++) {            
            id = youtubeJSON.data.items[i].id;
            mytablebody += "<td>" + vidCell1 + id + vidCell2 + id + vidCell3 + "</td>";
            mytablebody += "</tr></tbody>";
            $('.thumbs').append(mytablebody);
        };    
    });​
</script>
</head>
<body>
    <table class="thumbs" width="100" height="100" border="2" cellpadding="0" cellspacing="0"></table>​
</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    var tmpl = '<a class="fancybox-media" href="https://www.youtube.com/watch?v={{id}}"><img src="http://i.ytimg.com/vi/{{id}}/hqdefault.jpg" width="100" alt="" /></a>';
jQuery.getJSON("https://gdata.youtube.com/feeds/api/videos?q=mirthkon&v=2&alt=jsonc",function(json) {
   jQuery.each(json.data.items, function(i, item){
       jQuery(document.body).append(tmpl.replace(/{{id}}/g, item.id));
   });
});

    This is fast and dirty and I made it right on this stackoverflow page using Chrome inspector. It just appends all created youtube links to the document. To optimize you should create a div before the loop, append all links to it in the loop, then after the loop append that one div to the DOM. Also, while testing this it looks like Youtube throttles API calls, so you might one to cache this in localStorage or something so you don’t make a lot of calls to youtube each time the page is accessed.

    Two additional comments: I created a template string for you so you don’t have to build out a long string each time. When writing and testing scripts console.log is your friend. console.log(youtubeJSON) for example to see what the data looks like. You can also do this for functions you don’t understand what data is passing to you inside of them. Inside the jQuery.each you can put console.log('args', arguments) to log what the method is passing to you each time.

    Cheers.

    • 0