Hi

I am retrieving data client-side with a nested ajax call. The second call is dependent on the data from the first call. Furthermore a $.each() function is placed inside both succes callbacks to iterate over the returned results. Code:

$.ajax({
    url: "https://test.com/_api/web/webs?$orderby=Title",
    headers: {
        'accept': 'application/json;odata=verbose',
        'content-type': 'application/json;odata=verbose'
    },
    success: function(data) {
        $.each(data.d.results, function(a, data) {
            $.ajax({
                url: data.Url + "/_vti_bin/ListData.svc/Header",
                headers: {
                    'accept': 'application/json;odata=verbose',
                    'content-type': 'application/json;odata=verbose'
                },
                success: function(data2) {
                    $.each(data2.d.results, function(a, data2) {
                        if (data.Title !== "Templates") {
                            var dueDate = "1.10.2015";
                            $("#case_table").append('<tr><td><a href="' + data.Url + '">' + data.Title + '</a></td><td>' + data2.Vessel + '</td><td>' + data2.Customer + '</td><td></td><td>' + dueDate + '</td><td>' + data2.Status + '</td></tr>');
                        }
                    })
                    console.log(data2)
                }
            })
        })
        $('#legal_table').DataTable();
    }
})

The data is retrieved just fine - but the datatables doesn't register the result. I suspect that the datatables is initialized before the ajax calls are done. I have tried moving the initialization function inside the last each loop. This results in only the last result gets added to the datatables, meaning just one row, the remaining rows are displayed in the table but disappear if i try to sort the columns.

I have tried to add done() and when() methods without luck.

Any suggestions?