嵌套的Ajax请求数组

Question

Good day. I'm trying to build an array of CDs and Tracks from an API, both using separate AJAX queries and then put them together in an object array.

The CD listing is the first ajax query.

success: function(data){
    $.each(data.items, function(key, value){
        var disc = new PlaylistModel(); //use another JS file to hold the obj data

        disc.id = this.id;
        disc.title = this.name;
        disc.trackCount = this.tracks.total;

        collection.push(disc); // array from further up in the code
    }

At this point I've got the "shell" of the CD (disc) pushed into the array and can access that without issue. The problem now is running a subsequent ajax request to pull in the meat and potatoes (each track of the CD).

Still within the same success callback:

$.each(self.collection, function(key, value){
    var tracks = new TrackCollection(value.discId);
    tracks.GetTracks(); // this is where I'm stuck, trying to put the track data in to the disc array.

}

At this point I'm unsure how I can properly push the incoming track data to that pre-populated array of CDs. This is using an $.ajax request on a separate TrackCollection.js file, with a simple return in the success callback:

success: function(data){                
    return data;
}

I feel a bit lost when reading up on $.when with .done/.then. It's just very overwhelming, so I'm hoping someone might be able to take this example I'm trying and offer some guidance. I'm just struggling to really understand how to build the full array, using 2 different async requests.

Thanks in advance!