CODEWITHSUNDEEP
javascriptspotify
MackMatthew
MackMatthew

Reputation: 15

Spotify Web API, What am I doing wrong?

I'm trying to create a site in which, through the Spotify Web API, I display the information of a certain element (Artist, Track, Album, etc ...). Not being very experienced in software development, I relied on guides on the Internet and I wrote the following code but it does not give results

<!DOCTYPE html>
<html>
<head>
<title>Index</title>
</head>
<body>
    <button type="button" onclick="processRequest()">Try it</button>

    <script>
    var xhr = new XMLHttpRequest();
    xhr.open('GET', "https://api.spotify.com/v1/search?q=Muse&type=track%2Cartist&market=US&limit=10&offset=5", true);
    xhr.setRequestHeader('Accept: ', 'application/json');
    xhr.setRequestHeader('Content-Type: ', 'application/json');
    xhr.setRequestHeader('Authorization: ', 'Bearer BQDWk5QhO-CDvXu6nYDbSMP_nubWIMDH6HDX5hPaQlGWIhim4f2qcCJADFVSePyhhCLklKgyXKhPIyRUWa_RpbB97lKKnQHoq4r3ahfw4friE8-fw8gcvchHGDdYv6PuLp1yXDYooNwuNuG-MDhub2WnNj-SUd9W6SadBOhJMeDabIXIWfVMizjeTdldIsNDriPznZnDB4vFTQ4oYfHrSIfh_D9M9noALwOY2cptpC_dKaF7reI-WN1nAEbgGewqTAmtNaOEEuY');
    xhr.send();

    function processRequest(e) {
    if (xhr.readyState == 4 && xhr.status == 200) {
        var response = JSON.parse(xhr.responseText);
        alert(response.artists);
        document.getElementById("artists").innerHTML = this.responseText;
    }
}
    </script>


</body>
</html>

The only thing that appears is the button, but if I press it, absolutely nothing happens. I hope you can help me.

Upvotes: 1

Views: 917

Answers (3)

Win
Win

Reputation: 62301

You are almost there. As others point out, the main problem is 'Accept'.

You can run in the following code in Full Page.

<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
</head>
<body>
	
    <button type="button" onclick="processRequest()" class="btn btn-primary">Try it</button>
	<div id="artists"></div>
	
    <script>
    /*var spotifyApi = new SpotifyWebApi();
    spotifyApi.setAccessToken('BQDSL01Fr_kd_cph_LVSymXBJu_0gEq75IC3zTSki4eSg_Uwum5tTDUm0d8tvyCQpaXSkfxR32ABFV7sgAZfHUKqMJXLkedeSLDF6v5mU98y3mnlYWZt1wQ_mWhPCTqXCZv-Vt_PWbyxZ-fHQy5Ryp5xby2EBqVTkQ&refresh_token=AQD1ZUVO6xgq7Ol-__h1aE0zf0iqVjsKxzr062CteUsmJZHWA-kT6ebcFpD89D-Qbet99qcbEftR_RrReDvLnWxmK6S4CrjcxFbFXzInLKK-v0JxPNTI6ejC15BBtmlwTAw');*/
    var xhr = new XMLHttpRequest();
    xhr.open('GET', "https://api.spotify.com/v1/search?q=Muse&type=track%2Cartist&market=US&limit=10&offset=5", true);
    xhr.setRequestHeader('Accept', 'application/json');
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.setRequestHeader('Authorization', 'Bearer BQDWk5QhO-CDvXu6nYDbSMP_nubWIMDH6HDX5hPaQlGWIhim4f2qcCJADFVSePyhhCLklKgyXKhPIyRUWa_RpbB97lKKnQHoq4r3ahfw4friE8-fw8gcvchHGDdYv6PuLp1yXDYooNwuNuG-MDhub2WnNj-SUd9W6SadBOhJMeDabIXIWfVMizjeTdldIsNDriPznZnDB4vFTQ4oYfHrSIfh_D9M9noALwOY2cptpC_dKaF7reI-WN1nAEbgGewqTAmtNaOEEuY');
    xhr.send();

    function processRequest(e) {
       if (xhr.readyState == 4 && xhr.status == 200) {
          var response = JSON.parse(xhr.responseText);
          var result = '';
          for(var i = 0; i < response.artists.items.length; i++){
             console.log(response.artists.items[i]);				
             result += '<div class="panel panel-primary"><div class="panel-body">' + 
             'name : ' + response.artists.items[i].name + '<br/>' + 					
             'popularity : ' + response.artists.items[i].popularity + '<br/>' + 
             'type : ' + response.artists.items[i].type + '</div></div>';
          }	
          document.getElementById("artists").innerHTML = result;
       }
	}
    </script>


</body>
</html>

Upvotes: 1

Khauri
Khauri

Reputation: 3863

Try looking at the console for future reference.

Your first mistake is that you shouldn't include the colon : in the first parameter.

Secondly, you never set the onload handler. Without this, the xhr object doesn't know what to do with your retrieved data.

Lastly, using alert isn't advised as it won't log the entire response. Use console.log and then check the console.

var xhr = new XMLHttpRequest();
xhr.open('GET', "https://api.spotify.com/v1/search?q=Muse&type=track%2Cartist&market=US&limit=10&offset=5", true);
xhr.setRequestHeader('Accept', 'application/json');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Authorization', 'Bearer ...');
xhr.send();

xhr.onload = function processRequest(e) {
  if (xhr.readyState == 4 && xhr.status == 200) {
    var response = JSON.parse(xhr.responseText);
    console.log(response)
    //document.getElementById("artists").innerHTML = this.responseText;
  }
}

Upvotes: 0

user3210641
user3210641

Reputation: 1631

The problem is exactly what your console says: 'Content-Type: ' is not a valid HTTP header field name.. In order to fix this change these to lines: 

xhr.setRequestHeader('Content-Type: ', 'application/json');
xhr.setRequestHeader('Authorization: ', 'Bearer BQDWk5QhO-CDvXu6nYDbSMP_nubWIMDH6HDX5hPaQlGWIhim4f2qcCJADFVSePyhhCLklKgyXKhPIyRUWa_RpbB97lKKnQHoq4r3ahfw4friE8-fw8gcvchHGDdYv6PuLp1yXDYooNwuNuG-MDhub2WnNj-SUd9W6SadBOhJMeDabIXIWfVMizjeTdldIsNDriPznZnDB4vFTQ4oYfHrSIfh_D9M9noALwOY2cptpC_dKaF7reI-WN1nAEbgGewqTAmtNaOEEuY');

to: 

xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Authorization', 'Bearer BQDWk5QhO-CDvXu6nYDbSMP_nubWIMDH6HDX5hPaQlGWIhim4f2qcCJADFVSePyhhCLklKgyXKhPIyRUWa_RpbB97lKKnQHoq4r3ahfw4friE8-fw8gcvchHGDdYv6PuLp1yXDYooNwuNuG-MDhub2WnNj-SUd9W6SadBOhJMeDabIXIWfVMizjeTdldIsNDriPznZnDB4vFTQ4oYfHrSIfh_D9M9noALwOY2cptpC_dKaF7reI-WN1nAEbgGewqTAmtNaOEEuY');

Upvotes: 0

Related Questions