AJAX在jQuery循环中调用

Question

我有以下代码，它正在工作（？），但我想我可以做得更简单，更优雅。我需要在一切都完成时调用一个方法（channelsFideos数组已填满）。最后的console.log函数运行并显示数组。对象在其中，但在控制台中显示为Array [0]。这是正常的吗？我想要的是确保在创建UI元素之前已经下载了所有数据。

menuItemsAndTabs: [],
categoriesAndChannels: [],
channelsVideos: [],

...
...
...

getChannelsAndVideos: function() {
    $.each(MyApp.menuItemsAndTabs[1].menuItem.tabs, function(index, value) {            
        var _id = value._id;
        var ajaxGetChannels = $.getJSON(MyApp.CONSTANTS.URLS.API + "/api/assets/" + _id, function(response) {

        }).done(function(response) {
            $.each(response.channels, function(ind, val) {
                MyApp.categoriesAndChannels.push({  
                    channel: {
                        categoryName: value.label,
                        channelName: val.channelId,
                        channelId: val._id              
                    }

                });
                var ajaxGetVideos = $.getJSON(MyApp.CONSTANTS.URLS.API + "/videos/channel/" + val.channelId, function(response) {

                }).done(function(response) {
                    $.each(response.videos, function(ind, val) {
                        MyApp.channelsVideos.push({
                            channelName: val.channelId,
                            videos: {
                                title: val.title
                            }
                        });
                    });
                });
            });


            });
        });


    console.log(MyApp.channelsVideos);


},