0

After the first iteration of the each loop, myArr is fully loaded with all 4 objects. (Look in your console for the print out of console.log(myArr) – after the first loop through).

I am struggling to understand how this is happening, because if you look at the print out of console.log(item), it only contains 1 object, not all 4.

So how is myArr getting fully loaded after the first iteration, when that should only be happening after the 4th iteration?

Here is a link to a JSFiddle with the same code: http://jsfiddle.net/bengrunfeld/fdtom886/ 

var obj = [
    {
        "id": 1111,
        "todoText": {"index":2,"items":[{"firstName":"Benny"},{"lastName":"Hill"}]}
    },
    {
        "id": 2222,
        "todoText": {"index":2,"items":[{"firstName":"Bob"},{"lastName":"Marley"}]}
    },
    {
        "id": 3333,
        "todoText": {"index":2,"items":[{"firstName":"John"},{"lastName":"Lennon"}]}
    },
    {
        "id": 4444,
        "todoText": {"index":2,"items":[{"firstName":"Led"},{"lastName":"Zeplin"}]}
    },
];

var myArr = [];

$.each(obj, function(key, item) {
    console.log(myArr);
    console.log(item);
    myArr.push(item);
});
Ben
  • 5,085
  • 9
  • 39
  • 58
  • @Rooster - sorry, but if you look at the 1st print out of `console.log(myArr)` in your JSFiddle, it still prints out a fully loaded array. At least it does on my machine (Chrome). Could you please explain why it does that? – Ben Mar 26 '15 at 22:16

1 Answers1

2

You're logging the array (by reference) to the console. Once you expand it, the each-loop is done, meaning the array itself has 4 items.

To see the difference here, you could log myArr.length and you'll see the length is what you'd expect within each iteration of the each-loop.

RE: Your "bonus question" the first print is not blank for me.

bvaughn
  • 13,300
  • 45
  • 46
  • To ditch the reference, you could do `console.log( myArr.slice(0,myArr.length) );` – blex Mar 26 '15 at 22:12
  • 1
    Yeah or you could `myArray.toString()` if you just wanted to see a rough representation of what state the array was in then. Either aren't very useful in isolateion. – bvaughn Mar 26 '15 at 22:15
  • So when you say that I'm logging a reference to the array, do you mean that by the time the array appears on the screen, it has already been loaded with all 4 values in the hard drive? – Ben Mar 26 '15 at 22:18
  • 1
    No. I just mean... Chrome's console displays the *actual* `myVar` variable and allows you to inspect it just like you would within the debugger. Since that variable gets filled in *really quickly*, by the time you actually inspect it- it has 4 items in it. Instead, if you added a `debugger;` statement after you logged, you'd be able to inspect it after each iteration - and you'd see what you were expecting to. – bvaughn Mar 26 '15 at 22:20
  • I'm gonna play with this a bit and think through it. After that if all is good, I'll mark your answer correct. Thanks for the help =) – Ben Mar 26 '15 at 22:22
  • Btw, you were right about the "bonus question". I just made a simple mistake in my code. – Ben Mar 26 '15 at 22:23
  • 1
    Btw, I'm guessing that using breakpoints in Dev Tools would solve this, right? – Ben Mar 26 '15 at 22:24
  • Yes, breakpoints would be equivalent to a `debugger` statement, so they would also help give a clearer picture. :) – bvaughn Mar 26 '15 at 22:53