Get a Collection of CDs 💿

Explanation of AJAX

When a user clicks on the button below, an onclick event listener will trigger a Javascript AJAX function that makes an http request to the server to get a file that contains a list of CDs.

A second function is ignited to format the response from the server, organizing all the file contents by artist and CD title into a table on this webpage.

REST API

Next, we will pitch a popular REST API to use on our website, Spotify Web API. The Spotify Web API will allow our users to search music genres, playlists, and tracks from Spotify's vast library of 100 million songs! A few technical steps will be needed to bring this API to life on our website.

  • First, we'll register our app on Spotify.
  • To do this, log in to Spotify Developer Dashboard and create a "Web App".
  • Copy the client ID and secret code.

  • We'll create an Access Token using our client ID, secret code, and Spotify's Client Credential Flow.
  • We'll re-use this token as credentials and permissions for all of our server requests.

  • We'll code a server request for each API Endpoint we want (get list of genres, playlists, tracks, and track details)
  • These requests will return JSON data that we'll convert.

  • We'll create an object to store HTML selectors.
  • We'll insert options for each selector using Spotify API.

  • As HTML Selectors are clicked and changed, we'll display dynamic options for each selected element.

Ready to see our hard work in real life? Here is a live demo of the Spotify Web API used on this website.

It is FREE to use Spotify's Web API. However, it does require someone on the team to have a personal Spotify app subscription which costs $14.99/month.