Array of Array, JSON.stringify() giving empty array instead of entire object

Question

Here's my array (from Chrome console):

Here's the pertinent part of code:

console.log(hours);
var data = JSON.stringify(hours);
console.log(data);

In Chrome's console I get [] from the last line. I should get {'Mon':{...}...}

Here is the minimal amount of JavaScript to reproduce the issue:

var test = [];
test["11h30"] = "15h00"
test["18h30"] = "21h30"
console.log(test);    
console.log(JSON.stringify(test)); // outputs []

I tried some other stuff like Convert array to JSON or Convert javascript object or array to json for ajax data but the problem remains.

Answer 1

Here is the minimal amount of javascript to reproduce the issue

var test = [];
test["11h30"] = "15h00"
test["18h30"] = "21h30"
console.log(test);    
console.log(JSON.stringify(test)); // outputs []

The issue with the above is that, while javascript will be happy to let you late-bind new properties onto Array, JSON.stringify() will only attempt to serialize the actual elements in the array.

A minimal change to make the object an actual object, and JSON.stringify works as expected:

var test = {}; // here is thre only change. new array ([]) becomes new object ({})
test["11h30"] = "15h00"
test["18h30"] = "21h30"
console.log(test);
console.log(JSON.stringify(test)); // outputs {"11h30":"15h00","18h30":"21h30"}

Answer 2

Like all JavaScript objects, Arrays can have properties with string-based keys like the ones you're using. But only integer keys (or keys that can be cleanly converted to integers) are actually treated as elements of an Array. This is why JSON isn't catching your properties, and it's also why your Arrays are all reporting their length as zero.

If you really need to use non-integer keys, you should be using plain Objects, not Arrays. This method has its own gotchas -for example, you need to be careful with for-in loops- but JSON will work the way you expect it to.

var hours = {
    "Mon" : {
        "11h30" : "15h00",
        "18h30" : "21h30"
    }, 
    "Tue" : {},
    "Wed" : {
        "11h30" : "15h00",
        "18h30" : "21h30"
    }, 
    "Thu" : {},
    "Fri" : {},
    "Sat" : {},
    "Sun" : {
        "11h30" : "15h00",
        "18h30" : "21h30"
    }, 
}