0
이런 질문을 많이 보았지만 다른 제안에서 모든 것을 시도한 것처럼 느껴지지 않았습니다. 그러나 JsFiddle에서 alert() 함수는 코드에서 작동하고 경고 상자가 나타납니다. 그러나 자바 스크립트 이클립스 프로젝트를 실행하기 위해 로컬 웹 브라우저를 사용할 때 이것은 내 자신의 환경에서는 그렇지 않습니다. 여기에 내 코드내 코드는 JSFiddle에서 작동하지만 로컬 서버에서는 작동하지 않습니다.
<!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'되어 : 또한,
로 변경해야 하는가? [브라우저 콘솔] (http://webmasters.stackexchange.com/q/8525)을 사용하여 오류를 읽고 네트워크 탭을 확인하여 모든 리소스가 있는지 확인하십시오. – Xufox