Question

我已经看过很多像这样的问题，但我觉得我已经尝试过其他一些建议，但似乎没有任何效果。但是在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>

这些警示线是我想用我收到的数据执行程序的实际内容的地方，但我还没有能够在这里完成任务。谢谢你的帮助！

Answer 1

当网址以[DataContract] public class Thing { [DataMember] public String ThingName; [DataMember(Name="property1")] public int Property1; [DataMember(Name="property2")] public String Property2; }开头时，如//，浏览器会更改协议以匹配网页所提供的协议。在本地文件上，这意味着//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.1/handlebars.min.js。由于您没有在本地计算机上安装API，因此不包括该资源。您应该将网址更改为file://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.1/handlebars.min.js。此外，

http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.1/handlebars.min.js

应更改为：

<script src="normalize.css"></script>

我的代码在JSFiddle中运行，但在本地服务器上运行

1 个答案: