Spotify API mini-project

by Jan Hjørdie

HTML

<form>

  <fieldset>
    <legend>Look for an artist</legend>
    <input value="" placeholder="Write the artist to find...">
    <button>search!</button>
  </fieldset>

  <fieldset>
    <legend>Select from the artists found</legend>
    <select id="artists"></select>
  </fieldset>

  <fieldset>
    <legend>Select an album</legend>
    <select id="albums"></select>
  </fieldset>

</form>

<ul></ul>

JavaScript

var $button = $("form button");
var $artistsSelect = $("#artists");
var $albumsSelect = $("#albums");
var $tracksContainer = $("ul");

/* @begin event button-click to get artists from spotify */

$button.on("click", function(e) {

  e.preventDefault();

  var $input = $("form input");
  var sArtistToFind = $input.val();
  var sGetArtistsUrl = "https://api.spotify.com/v1/search?type=artist&query=" + sArtistToFind
    
  $.ajax({
    url: sGetArtistsUrl,
    dataType: "json",
    success: function( oDataReceived ) {

      var aArtists = oDataReceived.artists.items;
      var oCurrentArtist;
      var sOptions = "<option>Please select your artist...</option>";

      $.each( aArtists, function( index, value ) {
        oCurrentArtist = value;
        sOptions += "<option value='" + oCurrentArtist.id + "'>" + oCurrentArtist.name + "</option>"
      });

      $artistsSelect.html(sOptions);

    }
  })
})
/* @end event button-click to get artists from spotify  */




/* @begin event get albums when artist is selected */
$artistsSelect.on("change", function(e) {

  var $optionSelected = $(this).find("option:selected");
  var sIdArtist = $optionSelected.val();

  var sGetAlbumsUrl = "https://api.spotify.com/v1/artists/" + sIdArtist + "/albums";

  $.ajax({
    url: sGetAlbumsUrl,
    dataType: "json",
    success: function( oDataReceived ) {

      var aAlbums = oDataReceived.items;
      var oCurrentAlbum;
      var sOptions = "<option>Please select your album...</option>";

      $.each( aAlbums, function( index, value ) {
        oCurrentAlbum = value;
        sOptions += "<option value='" + oCurrentAlbum.id + "'>" + oCurrentAlbum.name + "</option>"
      })
      $albumsSelect.html(sOptions);
    }

  });

});
/* @end event get albums when artist is selected */


/* @begin event get tracks when album is selected */
$albumsSelect.on("change", function(e) {

  var $optionSelected = $(this).find("option:selected");
  var sIdAlbum = $optionSelected.val();

  var...