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();
});

Rather than send an AJAX call with each iteration, can you send your entire JSON via AJAX, sort it out server-side, and send back accordingly? Thus resulting in one call? — tymeJV, Jun 06 '13 at 19:40
You might want to breakout your each statements into seperate functions and pass in data rather than this nesting. Better for readability and maintainability. — Christopher Marshall, Jun 06 '13 at 19:41
I second the opinion above. Build a JSON and do one check server side. See here for more info: http://stackoverflow.com/questions/561046/how-many-concurrent-ajax-xmlhttprequest-requests-are-allowed-in-popular-browse — Lim H., Jun 06 '13 at 19:43
So i should sort it out in my php file and then return one big string with my html code to put in my table? — Dante, Jun 06 '13 at 19:46

score 1 · Answer 1 · answered Jun 06 '13 at 20:10

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.

jquery - Perform ajax call in .each iteration

1 Answers1