jQuery .each loop not looping but does when you console.log?

Question

little confused, i have a .each function which displays all results from JSON when i use console.log but when i try to output using .html() it only shows one? any reason why?

code:

$(document).ready(function(){
    $.get('functions/ListOrders.php', function(xml){ 
        var newOrders = $.xml2json(xml);
        $.each(newOrders.ListOrdersResult.Orders.Order, function(index, value) { 
            //console.log(value.AmazonOrderId);
            $('#orderAmount').html("<b>Order Total:</b><br>" + index + "<br><br>");
            $('#orderListing').html("<b>Order Listing:</b><br>" + value.AmazonOrderId);
        });
    });
});

Thanks

You're overwriting the contents of a single element every time. — hobbs
– hobbs, Commented May 14, 2014 at 1:42
Try replacing .html() with .append(). Fiddle with it from there. — Hamza Kubba
– Hamza Kubba, Commented May 14, 2014 at 1:46
Downvoting the question is unnecessary btw. He's just new and doesn't know... he asked the question properly. I upvoted to counter the downvote. — Hamza Kubba
– Hamza Kubba, Commented May 14, 2014 at 1:46

Vlad Bezden · Accepted Answer · 2014-05-14 02:04:58Z

1

You getting only one result because in your loop you override existing value. Basically you override html value. If you use append instead it will add values to your existing elements with each loop iteration.

$(document).ready(function(){
    $.get('functions/ListOrders.php', function(xml){ 
        var newOrders = $.xml2json(xml);
        $.each(newOrders.ListOrdersResult.Orders.Order, function(index, value) { 
            $('#orderAmount').append("<b>Order Total:</b><br>" + index + "<br><br>");
            $('#orderListing').append("<b>Order Listing:</b><br>" + value.AmazonOrderId);
        });
    });
});

edited May 14, 2014 at 2:04

answered May 14, 2014 at 1:58

Vlad Bezden

90.7k27 gold badges261 silver badges190 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

php-dev Over a year ago

+1, but just add him an explanation why he is getting only on result

Collectives™ on Stack Overflow

jQuery .each loop not looping but does when you console.log?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related