JavaScript对象是emtpy
我正在使用SpotifyAPI转储用户的所有播放列表和包含的曲目名称。我知道了如何请求该信息,并尝试将其存储在一个散列中,在该散列中,可以通过播放列表名称散列[playlist name]=[track1,track2,等等]找到一组曲目。当我将console.log记录下来时,一切看起来都很好 但是,当我尝试使用handle bars帮助程序迭代并显示所有内容时,JavaScript认为对象是空的。下面是一些代码:JavaScript对象是emtpy,javascript,jquery,json,ajax,spotify,Javascript,Jquery,Json,Ajax,Spotify,我正在使用SpotifyAPI转储用户的所有播放列表和包含的曲目名称。我知道了如何请求该信息,并尝试将其存储在一个散列中,在该散列中,可以通过播放列表名称散列[playlist name]=[track1,track2,等等]找到一组曲目。当我将console.log记录下来时,一切看起来都很好 但是,当我尝试使用handle bars帮助程序迭代并显示所有内容时,JavaScript认为对象是空的。下面是一些代码: //helper that will display eventually,
//helper that will display eventually, but right now logs "undefined"
Handlebars.registerHelper('read_hash', function(hash){
console.log(hash.length); //undefined
console.log(Object.keys(hash); //undefined
console.log(hash); //looks fine.. results in screenshot..
});
//ajax request that successfully get's all of the playlist data I want
$.ajax({
url: 'https://api.spotify.com/v1/me/playlists',
headers: {
'Authorization': 'Bearer ' + access_token
},
success: function(response) {
//make a new hash and put in template
var processed = 0;
response.items.forEach(function(e){
var playlistName = e.name;
//get tracks by nesting a request lol
$.ajax({
url: e.tracks.href,
headers: {
'Authorization': 'Bearer ' + access_token
},
success: function(responseTwo) { //returns track objects
playlists[playlistName] = responseTwo.items;
processed++;
}
}).done(function(){
if(processed >= response.items.length)
{
playlistPlaceholder.innerHTML = playlistTemplate({Playlists: playlists}); //get playlists
}
});
});
//handle bars template with call to read_hash
<script id="playlist-template" type="text/x-handlebars-template">
<h1>playlists</h1>
<table>
<tr>
<th>playlist</th>
<th>tracks</th>
</tr>
{{read_hash Playlists}}
</table>
</script>
另外,当我从read_hash控制台记录JSON.stringifyhash时,我会得到我想要的结果,所以。。。也许有些东西起作用了 长度属性仅适用于数组,响应是一个对象
var property = {"test object track 123":"test"};
console.log(property.length); //shows undefined
此外,registerHelper语句必须生成错误,因为没有闭合括号
迭代属性
//show error "closed parenthesis"
console.log(Object.keys(hash); //undefined
//helper that will display eventually, but right now logs "undefined"
Handlebars.registerHelper('read_hash', function(hash){
for (var playlist in hash) {
console.log("the length of item is" + hash[playlist].length);
}
});
我通过使用ajaxdone回调修复了它。也许有一种更有条理的方法来处理这个问题,但我的解决方案是: 转储播放列表数据的ajax请求:
$.ajax({
url: 'https://api.spotify.com/v1/me/playlists',
headers: {
'Authorization': 'Bearer ' + access_token
},
success: function(response) {
//make a new hash and put in template
var processed = 0;
response.items.forEach(function(e){
var playlistName = e.name;
//get tracks by nesting a request lol
$.ajax({
url: e.tracks.href,
headers: {
'Authorization': 'Bearer ' + access_token
},
success: function(responseTwo) { //returns track objects
playlists[playlistName] = responseTwo.items;
processed++;
}
}).done(function(){
if(processed >= response.items.length)
{
playlistPlaceholder.innerHTML = playlistTemplate({Playlists: playlists}); //get playlists
}
});
});
//console.log(playlists);
$('#login').hide();
$('#loggedin').show();
}
});
用于分析关联数组的把手辅助对象:
Handlebars.registerHelper('read_hash', function(hash){
jsonHash = JSON.parse(JSON.stringify(hash));
var html = "<table style='width:5px'><tr><th>Playlist</th><th>Track</th></tr>"; //stores markup to write and return at end
for(var playlistName in jsonHash)
{
var playlistTracks = jsonHash[playlistName];
html = html + "<tr><td>" + playlistName + "</td><td><ul>";
for(var i = 0; i < playlistTracks.length; i++)
{
html = html + "<li>" + playlistTracks[i].track.name + "</li>";
}
html = html + "</ul></td></tr>";
}
console.log(html + "</table>");
return new Handlebars.SafeString(html + "</table>");
});
要显示的把手模板:
<script id="playlist-template" type="text/x-handlebars-template">
<h1>playlists</h1>
{{read_hash Playlists}}
<table>
<tr>
<th>playlist</th>
<th>tracks</th>
</tr>
</table>
</script>
read_hash调用在哪里?您试图在填充对象之前访问该对象,控制台显示{}.$这一事实就很明显了。ajax是异步的。playlists[playlistName]=responseTwo.items;在playlipholder.innerHTML=playliptemplate{Playlists:Playlists};之后发生;。还请注意蓝色的小i框。这可能是控制台中延迟加载的一个典型案例,使您认为它已定义。console.logJSON.stringifyhash;值得一提的是,JavaScript没有散列类型,对象也没有实现为真正的散列表。您可能需要记录哈希类型,以查看实际使用的内容。请查看。它也可以通过数组来完成。