Display nested items in JSON object with jQuery [duplicate]

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. stackoverflow.com/questions/8553539/… — Praveen Reddy
– Praveen Reddy, Commented Jun 4, 2014 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 for more info. — Paul Roub
– Paul Roub, Commented Jun 4, 2014 at 20:45

Barmar · Accepted Answer · 2014-06-04 21:16:40Z

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 4, 2014 at 21:16

answered Jun 4, 2014 at 20:44

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Aaron Turecki Over a year ago

hmm, the value of the nested objects is now undefined.

Barmar Over a year ago

Forgot the return content statement. It works now

Collectives™ on Stack Overflow

Display nested items in JSON object with jQuery [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related