DEV Community

Cover image for Working with the Spotify Api as a student in JavaScript
javier
javier

Posted on

Working with the Spotify Api as a student in JavaScript

As a person who is semi-new to coding, tapping in to the Spotify Api might seem pretty intimating. Trust me, it was, but once you break it down it's actually not too hard and absolutely cool to work with. If you do any project with music I highly recommend using it. My first challenge was actually getting data from the Api. This was definitely a blocker since I haven't worked with an Api with that needs any kind of token or authorization. This was solved with 2 days of research and few trips to stack overflow. To get onto Spotify's Api you really just have to get your Fetch headers right like so:

headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'Authorization':  `Bearer ` + token
        }     
Enter fullscreen mode Exit fullscreen mode

Although using a token isn't super efficient, I haven't quite figured out a way around it, since the token is only good for 60 minutes. I'll definitely have an update for you when I do figure that part out.
Depending on what kind of data you're trying to get from the Api will determine what your fetch link will be. The base of the link will start looking something like this:

https://api.spotify.com/v1/

I personally was playing around with looking for artist data so my link went a little like this:

https://api.spotify.com/v1/artists

If you run your fetch like this it will give you an error. So after artists, you will have to specify which artists you are looking for with their unique id, which you can find in the Spotify web browser in the link when you look up an artist like so :

Image description

After that, I recommend console logging your results to make sure you have the results you're looking for (console log everything !!!!). I did a group project in my cohort which honestly I am very impressed with. Make sure you go check it out!!!!

https://github.com/javirodmart/phase1ProjectJTK

If you do decide to check it make sure you put in a new token!

Top comments (0)