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 and album to it, and a data attribute data-id, which is set to the id of the album, has also been added.

4. After $.each is finished, we push the DOM inside the div albumNames.

5. You can now verify that album names are being displayed...