javascript - キャッチされていない TypeError: undefined のプロパティ '長さ' を読み取ることができません、javascript

Question

FacebookページからandFacebooks Javascript APIをインポートするために使用するjqueryモバイルアプリケーションを開発しています。albumsphotos

私のjavascriptコードはこれをやろうとします:

1)albums API 呼び出しを使用してalbum name、をフェッチします。cover_photo_linkidnumber of the photosalbum

2)photos API 呼び出しを使用して、 everyの をフェッチしalbumます。API 呼び出しでは、 everyphoto linkとthumbnail linkをそれぞれと という2 次元配列に保持します。albumPhotos[x][y]albumThumnails[x][y]

3)listViewすべてのアルバムを動的に作成しようとname/thumbnailし、ユーザーがアルバムを選択すると、写真に移動します。

私のjavascriptコードは次のようになります:

<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>');

エラーが発生する場所: Uncaught TypeError: Cannot read property 'length' of undefined , javascript

ヒントを与えるために、真実は、このコードでも同じ種類のエラーが発生していたことです。

for(var k=0; k<response.data.length; k++){ 
     albumThumbnails[i][k] = response.data[k].picture;
     albumPhotos[i][k] = response.data[k].source;}

どこのプロパティpictureもsource読み取ることができず、これに書き換えて修正しました：

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;}

なぜこのエラーが発生するのですか?