我正在使用Facebooks Javascript API将Facebook页面的albums和photos导入我的网站。
我的javascript代码如下所示：
<script>
var albumPhotos = new Array();
var albumThumbnails = new Array();
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '5698434687426', // App ID from the app dashboard
channelUrl : 'channel.html', // Channel file for x-domain comms
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins on the page
});
// Additional initialization code such as adding Event Listeners goes here
FB.api('1607099163/albums', function(response) {
if(!response || response.error) {
// render error
alert("Noo!!");
} else {
// render photos
for(var i=0; i<response.data.length; i++){
(function (i) {
var albumName = response.data[i].name;
var albumCover = response.data[i].cover_photo;
var albumId = response.data[i].id;
var numberOfPhotos = response.data[i].count
FB.api(albumId + "/photos", function(response) {
if(!response || response.error) {
// render error
alert("Noo!!");
} else {
for(var k=0; k<numberOfPhotos; k++){
albumThumbnails[i][k] = response.data[k].picture;
albumPhotos[i][k] = response.data[k].source;
}
}
});
console.log(albumName);
FB.api( albumCover, function(response) {
if(!response || response.error) {
// render error
alert("Noo!!");
} else {
// render photos
$(".albums").append('<li>'+
'<a href="#Gallery' + i + '"' + 'data-transition="slidedown">'+
'<img src= "' + response.picture + '" />'+
'<h2>' + albumName + '</h2>'+
'<p>' + "Number of Photos: " + numberOfPhotos +'</p>'+
'</a>'+
'</li>')
.listview('refresh');
$("#home").after('<div data-role="page" data-add-back-btn="true" id=Gallery'+ i +
' class="gallery-page"> ' +
' <div data-role="header"></div> ' + ' <div data-role="content"> ' +
' <ul class="gallery"></ul> ' + ' </div> ' +
' </div> ');
}
});
})(i);
} //end of for loop
}
});
};
正如您在开始时所看到的，我使用API获取有关特定网页albums的信息：FB.api('169070991963/albums', function(response) {...}
一切都按预期工作，我可以获得albumNames , albumCovers , albumIds等信息。
现在，对于我导入的每张专辑，我想要一个数组，我将保存所有的图片和缩略图。出于这个原因，我进行了另一个API调用，FB.api(albumId + "/photos", function(response) {}。
我像这样处理响应：
for(var k=0; k<numberOfPhotos; k++){
albumThumbnails[i][k] = response.data[k].picture;
albumPhotos[i][k] = response.data[k].source;
}
此时我收到错误：Uncaught TypeError: Cannot set property '0' of undefined
我无法理解未定义的内容......有什么想法吗？
*顺便说一下，我使用FB.api( albumCover, function(response) {..}进行下一次API调用以获取相册的封面照片并创建一个jquery移动列表视图，也适用。
下面提供的答案解决了二维表问题。
但现在错误是：Uncaught TypeError: Cannot read property 'picture' of undefined
我在代码后面遇到同样的问题，所以我正在进行此编辑。代码现在看起来像这样建议：
<script>
var albumPhotos = new Array();
var albumThumbnails = new Array();
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '564984346887426', // App ID from the app dashboard
channelUrl : 'channel.html', // Channel file for x-domain comms
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins on the page
});
// Additional initialization code such as adding Event Listeners goes here
FB.api('169070991963/albums', function(response) {
if(!response || response.error) {
// render error
alert("Noo!!");
} else {
// render photos
for(var i=0; i<response.data.length; i++){
(function (i) {
var albumName = response.data[i].name;
var albumCover = response.data[i].cover_photo;
var albumId = response.data[i].id;
var numberOfPhotos = response.data[i].count;
FB.api(albumId + "/photos", function(response) {
if(!response || response.error) {
// render error
alert("Noo!!");
} else {
for(var k=0; k<response.data.length; k++){
albumThumbnails[i] = albumThumbnails[i]||{};
albumThumbnails[i][k] = response.data[k].picture;
albumPhotos[i] = albumPhotos[i] || {};
albumPhotos[i][k] = response.data[k].source;
}
}
});
console.log(albumName);
FB.api( albumCover, function(response) {
if(!response || response.error) {
// render error
alert("Noo!!");
} else {
// render photos
$(".albums").append('<li>'+
'<a href="#Gallery' + i + '"' + 'data-transition="slidedown">'+
'<img src= "' + response.picture + '" />'+
'<h2>' + albumName + '</h2>'+
'<p>' + "Number of Photos: " + numberOfPhotos +'</p>'+
'</a>'+
'</li>')
.listview('refresh');
$("#home").after('<div data-role="page" data-add-back-btn="true" id=Gallery'+ i +
' class="gallery-page"> ' +
' <div data-role="header"><h1>Gallery</h1></div> ' + ' <div data-role="content"> ' +
' <ul class="gallery"></ul> ' + ' </div> ' +
' </div> ');
for(var x=0; x < albumPhotos[i].length; x++)
$('#Gallery' + i + ' .gallery').append('<li><a href="' + albumPhotos[i][x] + '" rel="external"><img src="' + albumThumbnails[i][x] + '" /></a></li>');
}
});
})(i);
} //end of for loop
console.log(albumPhotos);
console.log(albumThumbnails);
}
});
};
我在你看到的时候添加了这段代码：
for(var x=0; x < albumPhotos[i].length; x++)
$('#Gallery' + i + ' .gallery').append('<li><a href="' + albumPhotos[i][x] + '" rel="external"><img src="' + albumThumbnails[i][x] + '" /></a></li>');
2维表albumPhotos中的每一行都是一张专辑，每一列都是这张专辑中的一张照片。通过上面的for循环，我尝试创建一个图库列表，每个图库都有一张包含所有照片的相册。
我再次收到错误：
Uncaught TypeError: Cannot read property '0' of undefined
Uncaught TypeError: Cannot read property '1' of undefined
Uncaught TypeError: Cannot read property '2' of undefined
Uncaught TypeError: Cannot read property '3' of undefined
.
.
.
为什么我现在这样做？
答案 0 :(得分：2)
您有albumThumbnails和albumPhotos作为空数组，并且在循环中您尝试将值添加到数组中。
让我们假设i = 0您的数组albumThumbnails的长度为0，这意味着albumThumbnails[0]未定义，那么您正试图设置albumThumbnails[0][0]这是错误。
这里的解决方案是首先在索引i处创建一个空对象（如果需要）然后设置其属性
看起来你正在尝试在这里创建对象
for(var k=0; k<numberOfPhotos && k < response.data.length; k++){
albumThumbnails[i] = albumThumbnails[i]||{};
albumThumbnails[i][k] = response.data[k].picture;
albumPhotos[i] = albumPhotos[i] || {};
albumPhotos[i][k] = response.data[k].source;
}