This is from Lab2 with additional HTML elements and CSS classes, to look nicer.

Code:

jQuery(document).ready(function($) {
  var iTunesAPI = 
  "http://ax.itunes.apple.com/WebObjects/MZStoreServices.woa/ws/RSS/topTvEpisodes/json";
  $.getJSON( iTunesAPI )
    .done(function( data, textStatus ) {
      $.each( data.feed.entry, function( i, ent ) {
//          console.log(i);
        var  url = ent["im:image"][2].label;
        $("<div>").attr('class', 'col-md-6').append($("<div>").attr('class', 'music').append($("<img>").attr('src', url)).append($("<p>").append($("<span>").append(i+1+" ")).append(ent.title.label))).appendTo("#topTV");
      });
	   console.log( "Successful response " + textStatus );
    })
	.fail(function( jqxhr, textStatus, error ) {
		var err = textStatus + ", " + error;
		 console.log( "Request Failed: " + err + " " + jqxhr.status );
	})
});

HTML:

<div class="row" id="topTV"></div>

Problems/Mistakes/Bugs:

  • The iTunes Apple API source used in this example is served over the internet without SSL (http://) while my website is SSL certified, so the cross-origin problem arose, to solve it, I updated my links to this page only to have it also with (http) protocol then it worked.

Lessons Learnt:

  • Apple did not offer this service over https servers; instead, they have another service called Apple Music API, which requires developer account and authorization key and other complications.

Result: