AJAX Callback, Deferred, or Promise

I have two functions I want to call on $(document).ready: getFSEsArray() and getFSEs. getFSEsArray() creates an array from a SharePoint list using an AJAX call. getFSEs then uses that array to populate HTML elements. How to get getFSEs to run once getFSEsArray is completed with a callback, jQuery deferred, and/or promise? Currently the HTML elements are empty because getFSEs runs before getFSEsArray is complete.

function getFSEsArray() {

    var endpointUrl = myURL + "PunchlistTracking/_api/web/lists/getbytitle('FSEs')/items?$top=1000&?$select=ID,FSEName,Title";

    $.ajax({
        url: endpointUrl,
        type: "GET",
        contentType: "application/json;odata=verbose",
        headers: { "Accept": "application/json;odata=verbose" },
        success: function (data) {
            var items = data.d.results;
            for (var i = 0; i < items.length; i++) {
                myFSEs.push([data.d.results[i].ID, data.d.results[i].Title, data.d.results[i].FSEName]);
            }
        }
    });

}	// getFSEsArray

function getFSEs(target, option0Text) {

    var output = "<option value='0' selected='selected'>" + option0Text + "</option>";
    for (var i = 0; i < myFSEs.length; i++) {
        output += "<option value='" + myFSEs[i][0] + "'>" + myFSEs[i][1] + " " + myFSEs[i][2] + "</option>";
    }
    $(target).html(output);

}	// getFSEs

$(document).ready(function () {

    getFSEsArray();
    
    getFSEs('#FSEs', "All FSEs");

});

Select allOpen in new window