title: Spotify API: Retrieving song/artist/album information using jQuery/ajax
body: <p>I've done some searching and I've found some stuff somewhat similar, but I'm still struggling a little with getting my head around the way in which this works.</p>
  
  <p>I'm trying to send a request to search for an artist and track to the Spotify API using jQuery and then retrieve the data from the json I'm receiving back.</p>
  
  <p>Here's my code:</p>
  
  <pre><code>    $.ajax({
          url: "https://api.spotify.com/v1/search?q=" + song + "%20" + artist + "&amp;type=track&amp;limit=1",
          dataType: "json",
          success: function(data) {
  
              //data downloaded so we call parseJSON function 
              //and pass downloaded data
              var json = $.parseJSON(data);
              //now json variable contains data in json format
              //let's display a few items
              var trackName = json.items.name;
          },
  
          error: function() {
            console.log("Error retrieving spotify API");
          }
      });
  </code></pre>
  
  <p>In the console, it's showing this:</p>
  
  <pre><code>XHR finished loading: GET "https://api.spotify.com/v1/search?q=Ride%20Twenty%20One%20Pilots&amp;type=track&amp;limit=1".
  </code></pre>
  
  <p>This tells me the request is sending correctly, the json spotify responds with is:</p>
  
  <pre><code>{
    "tracks" : {
  "href" : "https://api.spotify.com/v1/search?query=Ride+Twenty+One+Pilots&amp;offset=0&amp;limit=1&amp;type=track",
  "items" : [ {
    "album" : {
      "album_type" : "album",
      "artists" : [ {
        "external_urls" : {
          "spotify" : "https://open.spotify.com/artist/3YQKmKGau1PzlVlkL1iodx"
        },
        "href" : "https://api.spotify.com/v1/artists/3YQKmKGau1PzlVlkL1iodx",
        "id" : "3YQKmKGau1PzlVlkL1iodx",
        "name" : "Twenty One Pilots",
        "type" : "artist",
        "uri" : "spotify:artist:3YQKmKGau1PzlVlkL1iodx"
      } ],
      "available_markets" : [ "AD", "AR", "AT", "AU", "BE", "BG", "BO", "BR", "CA", "CH", "CL", "CO", "CR", "CY", "CZ", "DE", "DK", "DO", "EC", "EE", "ES", "FI", "FR", "GB", "GR", "GT", "HK", "HN", "HU", "ID", "IE", "IS", "IT", "JP", "LT", "LU", "LV", "MC", "MT", "MX", "MY", "NI", "NL", "NO", "NZ", "PA", "PE", "PH", "PL", "PT", "PY", "SE", "SG", "SK", "SV", "TR", "TW", "US", "UY" ],
      "external_urls" : {
        "spotify" : "https://open.spotify.com/album/3cQO7jp5S9qLBoIVtbkSM1"
      },
      "href" : "https://api.spotify.com/v1/albums/3cQO7jp5S9qLBoIVtbkSM1",
      "id" : "3cQO7jp5S9qLBoIVtbkSM1",
      "images" : [ {
        "height" : 640,
        "url" : "https://i.scdn.co/image/52fc1b3b08807194b87cd7e4fd68f5118d991e44",
        "width" : 640
      }, {
        "height" : 300,
        "url" : "https://i.scdn.co/image/cd5eb6933cca9421578e3badfed816f046f3a86e",
        "width" : 300
      }, {
        "height" : 64,
        "url" : "https://i.scdn.co/image/7f143f49de9521bc762c68cd29ff251f94244c28",
        "width" : 64
      } ],
      "name" : "Blurryface",
      "type" : "album",
      "uri" : "spotify:album:3cQO7jp5S9qLBoIVtbkSM1"
    },
    "artists" : [ {
      "external_urls" : {
        "spotify" : "https://open.spotify.com/artist/3YQKmKGau1PzlVlkL1iodx"
      },
      "href" : "https://api.spotify.com/v1/artists/3YQKmKGau1PzlVlkL1iodx",
      "id" : "3YQKmKGau1PzlVlkL1iodx",
      "name" : "Twenty One Pilots",
      "type" : "artist",
      "uri" : "spotify:artist:3YQKmKGau1PzlVlkL1iodx"
    } ],
    "available_markets" : [ "AD", "AR", "AT", "AU", "BE", "BG", "BO", "BR", "CA", "CH", "CL", "CO", "CR", "CY", "CZ", "DE", "DK", "DO", "EC", "EE", "ES", "FI", "FR", "GB", "GR", "GT", "HK", "HN", "HU", "ID", "IE", "IS", "IT", "JP", "LT", "LU", "LV", "MC", "MT", "MX", "MY", "NI", "NL", "NO", "NZ", "PA", "PE", "PH", "PL", "PT", "PY", "SE", "SG", "SK", "SV", "TR", "TW", "US", "UY" ],
    "disc_number" : 1,
    "duration_ms" : 214506,
    "explicit" : false,
    "external_ids" : {
      "isrc" : "USAT21500598"
    },
    "external_urls" : {
      "spotify" : "https://open.spotify.com/track/2Z8WuEywRWYTKe1NybPQEW"
    },
    "href" : "https://api.spotify.com/v1/tracks/2Z8WuEywRWYTKe1NybPQEW",
    "id" : "2Z8WuEywRWYTKe1NybPQEW",
    "name" : "Ride",
    "popularity" : 91,
    "preview_url" : "https://p.scdn.co/mp3-preview/26fc2318d6ebad09ae7aed7adfce2b28413cea7e",
    "track_number" : 3,
    "type" : "track",
    "uri" : "spotify:track:2Z8WuEywRWYTKe1NybPQEW"
  } ],
  "limit" : 1,
  "next" : "https://api.spotify.com/v1/search?query=Ride+Twenty+One+Pilots&amp;offset=1&amp;limit=1&amp;type=track",
  "offset" : 0,
  "previous" : null,
  "total" : 20
  }
  }
  </code></pre>
  
  <p>I'm trying to retrieve the following information and save them into the variables:
  The song name, the artist, the album cover &amp; the link to the album on spotify.</p>
  
  <p>I've tried using</p>
  
  <pre><code>var trackName = json.tracks.items.name;
  </code></pre>
  
  <p>But the console has this error:</p>
  
  <pre><code>(index):465 Uncaught TypeError: Cannot read property 'name' of undefined
  </code></pre>
  
  <p>When I look into where this is, it's where I am trying to set the variables in the code.</p>
  
  <p>If anyone could point me in the right direction, or help me at all with this that'd be greatly appreciated!</p>
  
  <p>Thank you</p>