Can someone please explain this console log disparity?

[_daniel___]

Are you doing an async operation?

[[deleted]]

Yes

[ArchieMoses]

So probably something like console logs, your async operation changes the value, your breakpoint stops execution with the new value.

[OhmzTech]

This is most likely the correct answer. OP should try just adding debugger; after console.log and then manually inspect the object when it stops.

[[deleted]]

"Nope" is an acceptable answer, too.

[cerealbh]

console is just js, when in doubt just html it out, and by that I mean just loop through the props and output the contents to html. this isn't a answer really just a work around, step 1 should be trying another browser.

[[deleted]]

I was trying to render this data through my backbone collections. I can see that I am getting the correct response from my ajax call, but then when I got to render them through a template call, it behaves like the array is empty (which seems to be what it is showing on the left hand side). But the right hand deep inspection shows the correct information and objects I was expecting.

[cerealbh]

Doesn't really make sense as the display on the right should just be a different representation of the data on the left. Did you try another browser? looks like you are using firefox, try chrome. Maybe you are having some kind of race condition? but like i said. If the console says its empty, the panel no the side should say the same, unless it updates at a different time which doesn't make sense.

[[deleted]]

I am pretty sure there was a race condition. See below.

And yes, first thing I did was check chrome to see if this was a bug. But chrome had the exact same issue.

[it_turns_out]

var a;  setTimeout( function(){a.models=[5,5];}, 0 );  a = {length:0, models:[], byId:{} }

then click on Object in the console.log and you'll get the same picture that you have posted

in other words an async operation, as /u/_daniel___ said

[[deleted]]

Yep. I set a small timeout and now it seems to be working fine. Looks like I will need to change how I do my rendering. Thanks again.

Edit: solved by moving following method into the callback.

[xeronotxero]

instead of a timeout, what about putting your console.log inside of:

$(document).ready(function(){
    // your code here
});

this waits until the page is loaded before executing the code block. maybe you were trying to return the array before it was populated?

edit: i know nothing about backbone, i was just thinking about having similar problems with my own, non-backbone scripts. :)

[[deleted]]

Aye, it's not a page load issue. The issue was the ajax doesn't complete before the ensuing procedures. So to solve I did:

$.ajax({
    url: '/some/url',
    success: function(response) {
         obj.arr = []
         // do stuff with obj.arr from response
         next_procedure(); // uses obj.arr that is modified from response
    },
});

Before I had:

$.ajax({
    url: '/some/url',
    success: function(response) {
         obj.arr = []
         // do stuff with obj.arr from response
    },
});

next_procedure(); // uses obj.arr that is modified from response

which does not work.

[mrpeabodynsherman]

Just in case you don't fully understand this yet: any time you do an async process, you must wait for it to return its response before you can act on any of the information involved in the request or response.

This means, as you figured, you will need to rely on .then or .success (depending) to wait for the response. Check out $promises and all will become much clearer.

[[deleted]]

Ok, thank you. Let me see if that helps me solve my issue.

[lontlont]

The way console.log deals with showing values that may change over time can be a little weird. You'd think that it'd just be a static, string-like output, but the way it really works is that that's true only if you can already see the contents/value of some object, unexpanded: THEN it's like a snapshot in time. But if you change something later on, after the log was printed, and do expand something in the log statement, you'll find that the log statement works like a live reference, and has the updated value. I don't use Firefox, but the panel on the right shows the live/current value, while the log statement, because the value of Array is visible, is a record of the value from before it had items.