Display nested items in JSON object with jQuery

Question

I'm trying to display nested items in my JSON object. Right now their value is [object Object]. I'm using a $.each loop but it doesn't seem to be getting the values of the nested items. What am I doing wrong?

JSON

{
    "AssetGUID":"00000000-0000-0000-0000-000000000000",
    "AwayForRepair":false,
    "BooleanDataItems":[
      {
         "Column":null,
         "DisplayValue":null,
         "TableName":null,
         "Value":false
      }
    ],
    "ConditionID":0,
    "DecimalDataItems":[
      {
         "Column":null,
         "DisplayValue":null,
         "TableName":null,
         "Value":0
      }
    ],
    "DeviceName":null,
    "Faulty":false,
    "ForDisposal":false,
    "ImageDataItems":[
      {
         "Column":null,
         "DisplayValue":null,
         "TableName":null,
         "Value":null
      }
    ],
    "InspectionDate":"\/Date(-62135596800000+0000)\/",
    "InspectionPassed":false,
    "InspectionType":0,
    "IntegerDataItems":[
      {
         "Column":null,
         "DisplayValue":null,
         "TableName":null,
         "Value":0
      }
    ],
    "LocationGUID":"00000000-0000-0000-0000-000000000000",
    "StringDataItems":[
      {
         "Column":null,
         "DisplayValue":null,
         "TableName":null,
         "Value":null
      }
    ],
    "TagTypeID":0,
    "TransactionGUID":null,
    "UserID":0
}

jQuery

var content = '';
$.each(data, function(i, post) {
    content += '<li>' + i + " : " + post + '</li>';
});

$("#addJSON").html(content);

Output

AssetGUID : 00000000-0000-0000-0000-000000000000
AwayForRepair : false
BooleanDataItems : [object Object]
ConditionID : 0
DecimalDataItems : [object Object]
DeviceName : null
Faulty : false
ForDisposal : false
ImageDataItems : [object Object]
InspectionDate : /Date(-62135596800000+0000)/
InspectionPassed : false
InspectionType : 0
IntegerDataItems : [object Object]
LocationGUID : 00000000-0000-0000-0000-000000000000
StringDataItems : [object Object]
TagTypeID : 0
TransactionGUID : null
UserID : 0

This might be helpful to you. http://stackoverflow.com/questions/8553539/jquery-json-looping-through-nested-objects — Praveen Reddy, Jun 04 '14 at 20:45
`each()` is doing what it's supposed to do. It iterates over each key/value pair in your `data` object - it does *not* then burrow down into any values that are themselves objects. See, for example, [this question](http://stackoverflow.com/questions/5432967/how-to-iterate-over-inner-objects-property-in-an-object) for more info. — Paul Roub, Jun 04 '14 at 20:45

Barmar · Accepted Answer · 2014-06-04T21:16:40.730

3

When post is an array or object, you need to recurse into it.

function display_json(data) {
    var content = '<ul>';
    $.each(data, function(i, post) {
        if (post !== null && typeof post == 'object') {
            content += display_json(post);
        } else {
            content += '<li>' + i + " : " + post + '</li>';
        }
    });
    content += '</ul>';
    return content;
}

edited Jun 04 '14 at 21:16

answered Jun 04 '14 at 20:44

Barmar

741,623
53
500
612

hmm, the value of the nested objects is now undefined. – Aaron Turecki Jun 04 '14 at 21:15
Forgot the `return content` statement. It works now – Barmar Jun 04 '14 at 21:17

Display nested items in JSON object with jQuery

1 Answers1