JavaScript Sorting Multidimensional JSON

Question

I have this JSON string:

{
"widgets":[
    {"column1":[
        {"weight":1, "bID":1, "hideMe":false, "collapse":false, "titleOf":"Test 1", "colorOf":"color-blue", "theFunction":"functionName"}, 
        {"weight":2, "bID":2, "hideMe":false, "collapse":false, "titleOf":"Test 2", "colorOf":"color-red", "theFunction":"functionName"}, 
        {"weight":3, "bID":3, "hideMe":false, "collapse":true, "titleOf":"Test 3", "colorOf":"color-yellow", "theFunction":"functionName"}
    ]},
    {"column2":[         
        {"weight":1, "bID":4, "hideMe":false, "collapse":false, "titleOf":"Test 4", "colorOf":"color-white", "theFunction":"functionName"}, 
        {"weight":3, "bID":5, "hideMe":false, "collapse":false, "titleOf":"Test 5", "colorOf":"color-green", "theFunction":"functionName"}, 
        {"weight":2, "bID":6, "hideMe":false, "collapse":true, "titleOf":"Test 6", "colorOf":"color-green", "theFunction":"functionName"}
    ]},
    {"column3":[
        {"weight":3, "bID":7, "hideMe":false, "collapse":false, "titleOf":"Test 7", "colorOf":"color-green", "theFunction":"functionName"}, 
        {"weight":2, "bID":8, "hideMe":false, "collapse":true, "titleOf":"Test 8", "colorOf":"color-yellow", "theFunction":"functionName"}, 
        {"weight":1, "bID":9, "hideMe":false, "collapse":false, "titleOf":"Test 9", "colorOf":"color-white", "theFunction":"functionName"}, 
    ]}
]}

if I do

alert(testJSON.widgets.length);

I get 3, however if I do

alert(testJSON.widgets.column1.length);

I get "testJSON.widgets.column3 is undefined" as an error.

What I am ultimately attempting to do is take each column1-3 and sort them by weight. Through something like

testJSON.widgets.column1.sort(function(a,b) { return parseFloat(a.weight) - parseFloat(b.weight) });

So I can then do a $.each() via jquery

Answer 1

Instead of:

alert(testJSON.widgets.column1.length);

use

alert(testJSON.widgets[0].column1.length);

"column1" is a property in the first of object of the array "testJSON.widgets"

Answer 2

If you want to be able to access like you mentioned, you need to lay it out like this:

{
"widgets": {
    "column1":[
        {"weight":1, "bID":1, "hideMe":false, "collapse":false, "titleOf":"Test 1", "colorOf":"color-blue", "theFunction":"functionName"},
        {"weight":2, "bID":2, "hideMe":false, "collapse":false, "titleOf":"Test 2", "colorOf":"color-red", "theFunction":"functionName"},
        {"weight":3, "bID":3, "hideMe":false, "collapse":true, "titleOf":"Test 3", "colorOf":"color-yellow", "theFunction":"functionName"}
    ],
    "column2":[
        {"weight":1, "bID":4, "hideMe":false, "collapse":false, "titleOf":"Test 4", "colorOf":"color-white", "theFunction":"functionName"},
        {"weight":3, "bID":5, "hideMe":false, "collapse":false, "titleOf":"Test 5", "colorOf":"color-green", "theFunction":"functionName"},
        {"weight":2, "bID":6, "hideMe":false, "collapse":true, "titleOf":"Test 6", "colorOf":"color-green", "theFunction":"functionName"}
    ],
    "column3":[
        {"weight":3, "bID":7, "hideMe":false, "collapse":false, "titleOf":"Test 7", "colorOf":"color-green", "theFunction":"functionName"},
        {"weight":2, "bID":8, "hideMe":false, "collapse":true, "titleOf":"Test 8", "colorOf":"color-yellow", "theFunction":"functionName"},
        {"weight":1, "bID":9, "hideMe":false, "collapse":false, "titleOf":"Test 9", "colorOf":"color-white", "theFunction":"functionName"},
    ]
    }
}

No need to wrap the columns in an array.