jQuery Ajax嵌套回调

Question

I have nested callabcks but resulted output is not ordered correctly. My ajax results are in ascending orders of id but html generated is random. can someone help me out pls?

var formatedhtml = '';
$.ajax({
    type: "POST",
    url: BASE_URL + 'index.php/orders/read',
    dataType: 'json',
    success: function(data) {

        $.each(data, function(key, value) {

            console.log(value);
            getdetails(value['id'], function(output) {
                formatedhtml = formatedhtml +
                    '<div class="col-md-4 col-sm-4 col-lg-3 col-xs-6">' +
                    ' <div class="row">' +
                    ' <div class="orderno">' + value['id'] + '</div>' +
                    '<div class="tableno">' + value['tableno'] + '</div>' +
                    '<div class="ordertype">' + value['type'] + '</div>' +
                    '<div class="timestamp">' + value['created'] + '</div>' +
                    ' </div>' +
                    '<hr>';
                $.each(JSON.parse(output['items']), function(k, val) {
                    formatedhtml = formatedhtml + '<div class="row">' +
                        '<div class="quantity">' + val[3] + '</div>' +
                        '<div class="item">' + '</div>' +
                        '</div>';

                });
                formatedhtml = formatedhtml +
                    '<div class="row">' +
                    '<div class="notes">' + value['id'] + '</div>' +
                    '</div>' +
                    '</div>';
                $("#orderlist").html(formatedhtml);
                console.log(output);
            });

        });

    }
});

edit:

Here is getdetails function. its an ajax request.

function getdetails(id, callback) {
    var result;
    $.ajax({
        type: "POST",
        url: BASE_URL + 'index.php/orders/readdetails',
        dataType: 'json',
        data: {
            id: id,
        },
        success: function(data) {
            callback(data[0]);
        }
    });
};

Answer 1

Use async:false in your getDetails() ajax call.

function getdetails(id, callback) {
var result;
$.ajax({
    type: "POST",
    url: BASE_URL + 'index.php/orders/readdetails',
    dataType: 'json',
    async: false,
    data: {
        id: id,
    },
    success: function (data) {
        callback(data[0]);


    }
});