O'Reilly logo

Mastering jQuery UI by Vijay Joshi

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required