Question

What I have..

$.getJSON('ui-DashboardWidgetsGet.php', function(msg)
    {
        alert(msg);
        if(msg.error == "yes"){console.log('Error Found: '+ msg.errorMsg);}
        else
        {
            ztsDashboardJSON = msg;
        }
    });
var ztsDashboardJSONCount = ztsDashboardJSON.widgets[0].length;

which dumps

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

Which is valid as per http://jsonlint.com/

It requests the php which echo’s that out from a db, it echo’s just that, nothing else. Yet I am trying to work with the result in the JavaScript there after and it doesn’t seem to be supplying me what I want..

my error:

ztsDashboardJSON.widgets is undefined [Break On This Error] var
ztsDashboardJSONCount = ztsDashboardJSON.widgets[0].length;

Answer 1

You need:

var ztsDashboardJSONCount = ztsDashboardJSON.widgets.length; // length is 1

since “widgets” is a key mapped to an array of objects.

If you’re trying to get the length of a column, you can do:

ztsDashboardJSON.widgets[0].column1.length; // length is 3

Demo here.

To traverse your object to make use of all the widgets, columns and column values, you can do this:

var widgets = ztsDashboardJSON.widgets;

$.each(widgets, function(i, val) {
    console.log("widget number" + i);
    $.each(val, function(i2, val2) {
        console.log(i2);
        $.each(val2, function(i3, val3) {
            console.log(val3.weight);
            console.log(val3.bID);
            console.log(val3.hideMe);
            console.log(val3.titleOf);
            console.log(val3.colorOf);
            console.log(val3.theFunction);
        });
    });
});

Demo here.