JSON array zero length even with elements?

Question

I am getting a JSON response from a server and creating a Javascript object. The structure is this:

var response = {
    key1:[],
    key2:[],
    key3:[],
    key4:[],
    key5:[]
}

When the request completes the response object is successfully completed like this:

Object (*expandable):
    key1: Array[0]
    key2: Array[0]
    key3: Array[0]
    key4: Array[20]
    key5: Array[113]

Now later on I want to store the information into a database. I have created a function and I console.log the response object to make sure it's ok (here it is getting interesting - see comments):

function setupDatabase(){
    console.log(response); // prints the response correctly (see response above)
    console.log(response.key5); //prints key5: Array[0]. If I expand the Array[0] all the elements are inside.
    console.log("key5: "+response.key5.length);//prints 0!!
}

It's normal for the first 3 keys to be 0 because there are no elements returned for them. The rest 2 are ok. Why do I get this log, while I run 3 console.log commands on the same object in a row? Am I missing something?

Answer 1

This is an issue with how console.log works on some browsers. You might look at using console.log(JSON.stringify(response.key5)) instead, to get a point-in-time view.

Basically, console.log logs the top level of something, but then if you expand one of those things later , it shows you the contents as they were when you expanded it , not when you logged it. So response.key5 was empty when you logged it , but then had things added to it, before you expanded it in the console.

This behavior is quite squirrelly. For instance, on Chrome, it can matter whether you have the console open or closed when the console.log happens. If you have the console closed, it logs a static thing you can't expand.

Here's a simple example demonstrating the problem.

In Chrome:

1. Make sure the console is closed.
2. Run this snippet.
3. Open the console.

You'll see the array, and if you expand it, you'll see the entry that was added after the console.log line.

 var a = []; console.log(a); a.push("Hi there"); 

Contrast with console.log(JSON.stringify(...)) :

 var a = []; console.log(JSON.stringify(a)); a.push("Hi there"); 

console.dir does something similar to console.log , but always logs a "live" version, even if the console is closed:

 var a = []; console.dir(a); a.push("Hi there"); 

When you have the console closed, then open it later, console.dir shows Array[1] with an expansion arrow, which then shows you the entry. But bizarrely, if you have the console open , you see Array[0] — but then expanding it shows you the entry:

This sort of makes sense, because the array was empty when you logged it, but then you're seeing its contents as of when you expanded it.