I've seen a lot of questions like this but I feel like I've tried everything from other suggestions and nothing has seemed to work. But in JsFiddle, the alert() function works in the code and an alert box appears, but this is not the case in my own environment when I use local web browser to run my javascript eclipse project. Here is my code
<!doctype html>
<html>
<head>
<title>Testy</title>
<style type="text/css">
.container {
margin: 1em;
}
img {
margin-bottom: 1em;
}
</style>
</head>
<body>
<div class="container">
<h1>Displaying User Data</h1>
<p>Log in with your Spotify account and this demo will display information about you fetched using the Spotify Web API</p>
<button class="btn btn-primary" id="btn-login">Login</button>
<button class="btn btn-res" id="btn-res">Result</button>
<div/>
<script src="normalize.css"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.1/handlebars.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function() {
function login(callback) {
var CLIENT_ID = '04270f76089b4a65a3eb749c0addb583';
var REDIRECT_URI = 'http://jmperezperez.com/spotify-oauth-jsfiddle-proxy/';
function getLoginURL(scopes) {
return 'https://accounts.spotify.com/authorize?client_id=' + CLIENT_ID +
'&redirect_uri=' + encodeURIComponent(REDIRECT_URI) +
'&scope=' + encodeURIComponent(scopes.join(' ')) +
'&response_type=token' +
'&show_dialog=true';
}
var url = getLoginURL([
'user-library-read playlist-read-private user-follow-read'
]);
var width = 450,
height = 730,
left = (screen.width / 2) - (width / 2),
top = (screen.height / 2) - (height / 2);
window.addEventListener("message", function(event) {
var hash = JSON.parse(event.data);
if (hash.type == 'access_token') {
callback(hash.access_token);
}
}, false);
var w = window.open(url,
'Spotify',
'menubar=no,location=no,resizable=no,scrollbars=no,status=no, width=' + width + ', height=' + height + ', top=' + top + ', left=' + left
);
}
function ridDuplicates(artists) { // returns final artists array
artistsFresh = []; // will contain no duplicate artists
artistsFresh.push(artists[0]); // first element can't be a duplicate
for (var i = 1; i < artists.length; i++) {
var j = i-1;
var duplicateArt = false;
while (j >= 0 && duplicateArt == false) {
if (artistsFresh[j] == artists[i]) {
duplicateArt = true;
}
j--;
}
if (!duplicateArt) {
artistsFresh.push(artists[i]);
}
}
return artistsFresh;
}
var i = 0;
function getUserData(accessToken, i) {
return $.ajax({
url: 'https://api.spotify.com/v1/me/tracks?limit=50&offset=' + i,
headers: {
'Authorization': 'Bearer ' + accessToken
}
});
}
var loginButton = document.getElementById('btn-login');
var resButton = document.getElementById('btn-res');
var artists = [];
resButton.addEventListener('click', function() {
alert(artists.length);
});
loginButton.addEventListener('click', function() {
login(function(accessToken) {
loginButton.style.display = 'none';
var arr = [getUserData(accessToken, i)];
arr[0]
.then(function(response) {
for (var i = 50; i < response.total; i += 50) {
arr.push(getUserData(accessToken, i));
}
Promise.all(arr).then(function(chunks) {
var artists = [].concat.apply([], chunks.map(function(response) {
return response.items.map(function(item) {
return item.track.album.artists[0].name;
});
}));
// these alert lines do not seem to work
alert(artists.length);
alert(artists[9]);
var newArray = ridDuplicates(artists);
alert(newArray.length);
});
})
.catch(function(err) {
// handle errors here
});
});
});
});
</script>
</body>
</html>
These alert lines are where I want to perform the actual meat of the program with the data I receive but I haven't been able to get things to function at all here. Thank you for your help!
When a URL begins with
//, like//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.1/handlebars.min.js, the browser changes the protocol to match the protocol that the page was served from. On a local file, this meansfile://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.1/handlebars.min.js. Since you don't have the API installed on your local computer, this won't include the resource. You should change the URL tohttp://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.1/handlebars.min.js. Also,should be changed to: