JQuery: Merge multiple JSON results

Question

Situation: User want to import Youtube playlist in a JQuery site using Youtube\'s JSON API.

Problem: Youtube only gives back first

Answer 1

Since you just want the items which is an array, you can use $.merge() in a repeating function:

function fetchPlaylist(pid, start, items) {
  items = items || [];
  start = start || 0;
  var the_url = 'http://gdata.youtube.com/feeds/api/playlists/' + encodeURIComponent(pid) + '?v=2&alt=jsonc&max-results=50';
  $.ajax({
      type: "GET",
      url: the_url,
      data: { start: start },
      dataType: "jsonp",
      success: function(responseData, textStatus, XMLHttpRequest) {
        if (responseData.data != null) {
          if (responseData.data.items) {
            $.merge(items, responseData.data.items); //add to items
            if (responseData.data.totalItems > start + 50) {
                fetchPlaylist(pid, start + 50, items);
            } else {
                outputFunction(items);
            }
          } else {
            console.log('No results for playlist: "' + pid + '"');
          }
        }
      }
  });
}

You can give it a try here, you just call it with the playlist id, like this:

fetchPlaylist("84780DAC99E1A285");​

Each time the request completes we see if the totalItems that youtube returns is higher than what we requested plus 50, if that's the case, fetch again, add those results...if not then we're done and pass the combined array to the outputFunction().