javascript - 未定義のオブジェクトの Javascript 配列

Question

javascript でオブジェクトの配列を作成しようとしていますが、配列を (クロムを使用して) コンソールに出力しようとすると、プッシュの直後に配列を出力しない限り、すべて未定義になります。

 var subitems = [];
 for (var i = 1; i < 1000; i = i + 50) {
       $.getJSON('http://gdata.youtube.com/feeds/api/users/' + username + '/subscriptions?max-results=50&start-index=' + i + '&alt=json', function (data) {
           var output = "";
           for (var x in data.feed.entry) {
               var subtitle = data.feed.entry[x].yt$username.$t;
               var subchannel = data.feed.entry[x].yt$channelId.$t;
               var subphoto = data.feed.entry[x].media$thumbnail.url;
               subitems.push({
                   subtitle: subtitle,
                   subchannel: subchannel,
                   subphoto: subphoto
               });
               console.log(subitems[0]); //Prints Fine
               output += '<div class="subtitle"><img src="' + subphoto + '"> <a href="http://www.youtube.com/channel/' + subchannel + '">' + propercase(subtitle) + '</a></div>';
           }
           maincontent.innerHTML = maincontent.innerHTML + output;
       });
 }
 console.log(subitems[0]); //This is undefined

Answer 1

これを行う「より簡単な」方法は次のとおりです。XHR リクエストをカウントし、すべてのリクエストが返されたときに done 関数を起動します。

var xhrCount = 0;
for (var i = 1; i < 1000; i = i + 50) {
    xhrCount++; // increment before request
    $.getJSON('http://gdata.youtube.com/feeds/api/users/' + username + '/subscriptions?max-results=50&start-index=' + i + '&alt=json', function (data) {
            // process response      
            // decrement after request is processed
            xhrCount--;
            if (xhrCount === 0) {
                // at this point all requests have returned  
                console.log(subitems);
            }
        }
    }
}

更新: はるかに優れたアプローチは、jQuery.Deferred()オブジェクトを利用することです。いくつかの修正が必要な簡単なデモがここにセットアップされています。一般的な考え方は、作成したすべての AJAX リクエストを追跡し、それらを に渡し、 をdeferred.when()使用して done 関数を割り当てることdeferred.done()です。コード (読みやすいように省略):

var subitems = [];
var deferreds = [];
for (var i = 1; i < 1000; i = i + 50) {
    var deferred = $.getJSON('https://gdata.youtube.com/feeds/api/users/warnerbrospictures/uploads?max-results=50&start-index=' + i + '&alt=json', function (data) {
        for (var j = 0; j < data.feed.entry.length; j++) {
            subitems.push({
                title: data.feed.entry[j].title.$t
            });
        }
    });
    deferreds.push(deferred);
}
$.when.apply($, deferreds).done(function () {
    console.clear();
    console.log(subitems);
    for (var i = 0; i < subitems.length; i++) {
        console.log(subitems[i].title);
    }
});

注: Google データ フィードには結果の総数が含まれているため、ハードコードされた「1000」を削除することができます。

Answer 2

配列を次のように宣言してみてください。

var subitems = [{}];