Mastering jQuery UI

Filling album names

To fill the album names, we will iterate in the response JSON and create HTML with album names. We will then place this HTML inside the placeholder in the left panel:

1. Write this code for method fillAlbumNames to display albums in the left panel:

   var albumNames = [];
   $.each(this.jsonAlbums, function(key, album)
   {
     albumNames.push('<h4 class="ui-widget-header album" data-id="' + album.id + '">' + album.albumName + ' </h4>');
   });
   $('#albumNames').html(albumNames.join(''));

   We have declared an array albumNames that will hold the DOM structure for each album.

2. Next we iterate in jsonAlbums property using jQuery's $.each iterator. In each iteration we create an h4 element with the album name inside it.
3. We also attach CSS classes ui-widget-header ...