【发布时间】：2016-12-20 00:05:56
【问题描述】：
我见过很多这样的问题，但我觉得我已经尝试了其他建议中的所有内容，但似乎没有任何效果。但是在 JsFiddle 中，alert() 函数在代码中起作用并出现了一个警告框，但是在我自己的环境中，当我使用本地 Web 浏览器运行我的 javascript eclipse 项目时，情况并非如此。这是我的代码
<!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>
这些警告行是我想用我收到的数据执行程序的实际内容的地方，但在这里我根本无法让事情正常运行。感谢您的帮助！
【问题讨论】：
-
normalize.css是 JavaScript 文件吗？使用browser console 并阅读错误并检查那里的网络选项卡以确认您的所有资源都已找到。
标签： javascript spotify jsfiddle