jquery - Perform ajax call in .each iteration

Question

i'm getting data for my shopping cart via Ajax.

The idea is the following: - i get line per line of the shopping cart - per line i do a check in the db for options to populate a select object - if that option is the same as the one from my line it gets selected

I can get this working with the option async set to false. But as I read here this is not the prefered method. How should I adjust my architecture?

 //get items from cart
$.ajax({
    type: "POST",
    url: "db/getImagesCart.php"
}).done(function(data) {
    //populate carts ul
    var items = [];
    obj = $.parseJSON(data.trim());
    $.each(obj, function(id, value) {
        //list formats of this item
        $.ajax({
            type: "POST",
            url: "db/getFormats.php",
            async: false
        }).done(function(data){
            var select_format = "<select style='text-align: center;'>";
            formats = $.parseJSON(data.trim());
            $.each(formats, function(id, test){
                //add select tot variable + select if the same
                if(test.format_id == value.idformat){
                    select_format += "<option value=" + test.format_id + " SELECTED data-price=" + test.format_price + ">" + test.format_name + "</option>";
                } else {
                    select_format += "<option value=" + test.format_id + " data-price=" + test.format_price + ">" + test.format_name + "</option>";
                }
            });
            select_format += "</select>";
            items.push('<tr id="row' + value.item_id + '"><td class="remove"><a href="#" class="delete" id="' + value.item_id + '"><img src="img/delete.png" height="25px" style="border: 0;" /></a></td><td class="image"><a class="fancybox" rel="group" href="' + value.path + '"><img src="' + value.path_thumb + '" style="max-width: 100px; height: 75px;" /></a></td><td class="formaat">' + select_format + '</td><td class="totalprice">&euro; ' + value.price + '</td></tr>');
        });

    });
    $("tbody").html(items.join(''));
    $(".fancybox").fancybox({
        openEffect: 'elastic',
        closeEffect: 'elastic',
        nextEffect: 'fade',
        prevEffect: 'fade'
    });
    $(".delete").click(function(){
        var cart_item = $(this).attr("id");
        var variables = 'action=2' + '&cart_item_id=' + cart_item;
        $.ajax({
            type: "POST",
            url: "db/cart.php",
            data: variables
        }).done(function(data){
            if($.browser.msie){
                $('#row' + cart_item).find('td').fadeOut('slow', function(){
                    $('#row' + cart_item).find('td').parent().remove();
                });
            } else {
                $('#row' + cart_item).fadeOut('slow', function(){
                    $('#row' + cart_item).find('td').parent().remove();
                });
            }
            calc_full();
        })
    });
    $(".formaat").change(function(){
        //recalculate prices
        $('.cart tr:gt(0)').each(function(){
            var theprice = $(this).find('.formaat select :selected').attr("data-price");
            $(this).find('.totalprice').html("&euro; " + theprice);
            //save to db
            var cart_item = $(this).attr('id').slice(3);
            var formaat = $(this).find('.formaat select :selected').val();
            var variables = 'action=3' + '&format=' + formaat + '&cart_item_id=' + cart_item;
            $.post("db/cart.php", variables, function(data){
            });
            calc_full();
        });
    })
    calc_full();
});

Answer 1

What async = false does is to force subsequent code to wait for the ajax call to complete, including the execution of done()

Since some of that subsequent code depends on stuff that happens inside of done(), you could just place all that subsequent code inside of done and then you would no longer require async = false.

Or you could wrap that external functionality in functions, and call those functions inside of done().

So if there is other stuff further down the line that has no dependency on the execution of done(), it won't have to wait for done() to be done.