从嵌套的jquery-ajax-get请求返回数据

我有两个JAVASCRIPT API Get调用，我正在使用JQUERY进行。我想将在第二次调用中构建的HTML附加到DOM中。

第一个调用获取一些数据。我循环浏览这些数据的长度，对每个索引进行第二次调用。

在第二次调用中，我构建了HTMLContent。

完成所有调用后，我将HTMLContent附加到DOM中。

我很难在第一次调用中返回HTMContent，因为我只想在DOM完全构建好后追加它。在我创建的for循环之外执行AND。

我知道我可以在第二次通话中附加完成的内容，但我真的很想知道如何返回。

我想也许我需要创建一个promise，但不确定这是否有帮助，因为范围仍然包含在第二个get请求.done func 中

这就是我到目前为止所拥有的。

var gallery = (function($){
    var init,
        firstGetCall,
        secondGetCall,
        HTMLContent = '';
    init = function(){
        // Make first call
        firstGETCall();
    };
    // Declare firstGETCall func
    firstGETCall = function(){
        $.ajax({
            url: 'http://example.com/data.json',
            type: 'GET',
            data: {
                numberOfItems: 10
            }
        })
        .done(function(data) {
            //  Cycle through each data element
            for (var i = 0; i < data.length; i++) {
                // Make second call
                secondGetCall(data[i]);
            };
        })
        .fail(function(error) {
            console.log(error);
        });
        // I want to append the DOM here with the conplete HTMLContent - built up of 10 x <div><img... elements
        // However I'm stuck as to how to return the complete HTMLContent
    };
    // Declare secondGetCall func
    secondGetCall = function(singleData) {
        $.ajax({
            url: 'http://example.com/data-2.json',
            type: 'GET',
            data: {
                type: singleData
            }
        })
        .done(function(data) {
            // Build HTMLContent
            HTMLContent = '<div><img src="' + data.image + ' title="' + data.subTitle + ' alt="Photo"></div>';
            // I do not want to append the DOM here
            // return HTMLContent doesn't work
        })
        .fail(function(error) {
            console.log(error);
        });
    };
    return {
        init: init
    };
})(jQuery);

gallery.init(jQuery);