Issue with nested .each() loops in jQuery executing asynchronously

Question

I have two nested each loops like so.

    $.each(a, function(index1, value1){
        console.log(value1)
        $.each(b, function(index2, value2){
             console.log(value2);
        }
    }

The output I'm expecting is

But what I'm actually getting is

How do I achieve the output I want. I understand that deferred objects are implemented now and that I can define functions and execution using deferred objects on functions I declare but I'm unsure on how to do that on existing functions.

EDIT: I messed up and abstracted it too much.

getAByX(x, function () {
            $.each(A, function (index, value) {
                full_list += "string with info";
                full_list += table_header;
                getBByA(value, function () {
                    $.each(B, function (index2, value2) {
                        full_list += "string with info";
                    });

                });

            });
            $(".table").append(full_list);
            hideLoading();
        });

Here's the trimmed full code, it's the function calls that are messing things up, $.each loops execute synchronously.

EDIT 2: Fixed the errors in the original short piece of code. Also, since the first piece of code works that means that the $.each loops execute synchronously and it's the function calls that I made that execute asynchronously. This realization makes the initial question invalid since the $.each call has the appropriate behavior.

You have to add more context to your problem. What code are you running... is it an ajax call? — Abhitalks
– Abhitalks, Commented Nov 30, 2014 at 9:24
index and value of the second "each loop" should be renamed as they are already defined in the outer "each loop". — Telmo Silva
– Telmo Silva, Commented Nov 30, 2014 at 9:25
As the question stands right now, it works fine. jsfiddle.net/abhitalks/989kj4Ly — Abhitalks
– Abhitalks, Commented Nov 30, 2014 at 9:26
Yep, I abstracted the code too much, I've edited it to give a better idea. — aoa
– aoa, Commented Nov 30, 2014 at 9:36

Chris Tavares · Accepted Answer · 2014-11-30 09:33:20Z

2

Your code is messed up. Here's the issue:

$.each(a, function(index, value) {
    console.log(a)

Notice you're printing a, not value. You're printing the value of the entire array each time through the loop, not the item you're iterating over.

This has nothing to do with deferreds or asynchrony.

answered Nov 30, 2014 at 9:33

Chris Tavares

30.6k4 gold badges49 silver badges66 bronze badges

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

Comments

MH2K9 · Accepted Answer · 2014-11-30 09:27:56Z

1

You should print value instead of a and b.

var a = ['a0', 'a1', 'a2'];
var b = ['b0', 'b1', 'b2'];
$.each(a, function(index, value){
    console.log(value) //console value instead of a
    $.each(b, function(index, value){
        console.log(value); //console value instead of b
    });
});

Also can try using map().

a.map(function(val, ond){
    console.log(val);
    b.map(function(v, k){
        console.log(v);
    });
});

answered Nov 30, 2014 at 9:27

MH2K9

12.1k7 gold badges34 silver badges49 bronze badges

Collectives™ on Stack Overflow

Issue with nested .each() loops in jQuery executing asynchronously

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related