Displaying Results from Spotify API

Displaying Results from Spotify API

I'm trying to learn how to make JSON requests. Kind of struggling with it. Specifically, I'm trying to access the Spotify API and display search results (i.e. thumbnails of albums) based on user input. This is what I have so far. Please tell me what I'm doing wrong or missing. Thanks.

HTML

<!DOCTYPE html>
  <html>
    <head>
      <script src="script.js"></script>
      <link rel="stylesheet" type="text/css" href="styles.css">

    </head>
    <body>
      <div class="top">
        <h1>Spotify Song Search</h1>
        <form>
          <input type="search" placeholder="Search for a album or band" id="song">
          <button type="submit" id="search">Search</button>
        </form>  
      </div>
      <div id="music">
      </div>

    </body>

  </html>

JavaScript/JQuery

$(document).ready(function() {
$('form').submit(function(evt) {
evt.preventDefault();
var $searchField = $('#search');
var spotifyAPI = " https://api.spotify.com/v1/search" // needs end point
var albums = $searchField.val();// Specifies type of user info to be retrieved and sent to Spotify API
var spotifyOptions = {
"type": "album",
"q": "artist",
"limit": "limit"

}; // Requests data from spotify API. Must be a JavaScript Object
function displayAlbums(data){
var albumHTML = '<ul>'; // Opening ul tag to hold a single album result
$.each(data.items, function(i, album){
albumHTML += '<div class="album" album-id="' + index + '">';
albumHTML += '<li>'; // You may need to use bootstrap to style array items correctly
albumHTML += '<a href="#">';
albumHTML += '<img src="' + album.images[0].url + '" alt="' + album.artists[1].name + '">';
albumHTML += '</a>';
albumHTML += '</div>';
return albumHTML;
}

albumHTML += '</ul>';
$('#music').html(albumHTML);

});

}
$.getJSON(spotifyAPI, spotifyOptions, displayAlbums); // Currently, these are only placeholders. The variables inserted as arguments have not been defined as variables

});

});

Thanks for your time.