title: Search for Track using Spotify API add in Album name and Artist name
body: <p>Working on a quick project to search for a music track in Spotify...  You add your track name into text area and produce a list of matching Track Id's with Artist Names and Album Name + Artwork... Below is example of the code that I have working on so far...  Stuck getting the Album Name / Album Image and the Artist Name...</p>
  
  <p>Example - that I was using was:
  Track: All of me
  Results should be Artist: John Legend
  Track ID is correct: 3U4isOIWM3VvDubwSI3y7a</p>
  
  <p>Shows as the first one....</p>
  
  <p><a href="http://jsfiddle.net/61f64ccq/2/" rel="nofollow">http://jsfiddle.net/61f64ccq/2/</a></p>
  
  <p>Also (Updated this bit...)</p>
  
  <p><a href="http://jsfiddle.net/UT7bQ/212/" rel="nofollow">http://jsfiddle.net/UT7bQ/212/</a>
      {{name}} - {{this.artists.name}}
  Trying to add code for the Handlebar.js for getting the Artists name from the .JSON data...</p>
  
  <p>Below for the first example....</p>
  
  <p>Using pure JS / Handlebar.js and HTML5.... Any help would be great... Did try {{artists.name}} but nothing was happening...</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;h1&gt;Search for a Track - Spotify&lt;/h1&gt;
  &lt;form id="search-form"&gt;
  &lt;input type="text" id="query" value="" class="form-control" /&gt;
  &lt;input type="submit" id="search" class="btn btn-primary" value="Search" /&gt;
  &lt;/form&gt;
  &lt;div id="results"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;script id="results-template" type="text/x-handlebars-template"&gt;
  {{#each tracks.items}}
  &lt;div &gt;{{id}} -         
  &lt;br /&gt; {{name}} &lt;br/&gt;&lt;/div&gt;
  // Issue - Image
  &lt;div style="border:1px solid red; background-image:url({{images.2.url}})" data-album-id="{{id}}" class="cover"&gt;&lt;/div&gt;
  // Issue - Artist Name and Album Name
  &lt;div style="border:1px solid green; "&gt; Artist name = {  } -  Album name = { } &lt;/div&gt;
  </code></pre>
  
  <p>Part of the Javascript code - </p>
  
  <pre><code>&lt;script&gt;
  var templateSource = document.getElementById('results-template').innerHTML,
  template = Handlebars.compile(templateSource),
  resultsPlaceholder = document.getElementById('results'),
  playingCssClass = 'playing',
  audioObject = null;
  var fetchTracks = function (albumId, callback) {
  $.ajax({
  url: 'https://api.spotify.com/v1/albums/' + albumId,
  success: function (response) {
  callback(response);
  }
  });
  };
  var searchAlbums = function (query) {
  $.ajax({
  url: 'https://api.spotify.com/v1/search',
  data: {
  q: query,
  type: 'track'
  // Gets the track - search query
  },
  success: function (response) {
  resultsPlaceholder.innerHTML = template(response);
  }
  });
  };
  // This was for playing the Track in your window...  Not working in the Track format...
  results.addEventListener('click', function (e) {
  var target = e.target;
  if (target !== null &amp;&amp; target.classList.contains('cover')) {
  if (target.classList.contains(playingCssClass)) {
  audioObject.pause();
  } else {
  if (audioObject) {
  audioObject.pause();
  }
  fetchTracks(target.getAttribute('data-album-id'), function (data) {
  audioObject = new Audio(data.tracks.items[0].preview_url);
  audioObject.play();
  target.classList.add(playingCssClass);
  audioObject.addEventListener('ended', function () {
  target.classList.remove(playingCssClass);
  });
  audioObject.addEventListener('pause', function () {
  target.classList.remove(playingCssClass);
  });
  });
  }
  }
  });
  document.getElementById('search-form').addEventListener('submit', function (e) {
  e.preventDefault();
  searchAlbums(document.getElementById('query').value);
  }, false);
  &lt;/script&gt;
  </code></pre>
  
  <p>Thanks
  Simon</p>