我正在使用将 Facebook 页面和Facebook 页面Facebooks Javascript API导入我的网站。albumsphotos
我的 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) {..}为获取专辑封面照片并创建 jquery mobile listView 而进行的下一个 API 调用也可以使用。
编辑
下面提供的答案解决了二维表问题。
但是现在错误是：Uncaught TypeError: Cannot read property 'picture' of undefined
编辑2
我稍后在代码中遇到了同样的问题，所以我正在编辑。代码现在看起来像这样建议：
<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>');
二维表中的每一行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
.
.
.
为什么我现在得到这个？