Dynamically display JSON file contents

Question

I am given a json file that contains a variable amount objects, all of which are different.

Here is an example of my JSON file.

{   
"DNS":  {
            "Server":  MYSERVER01
            "IP":  "XXX.XXX.XXX.XXX"
        },
"TST":  {
            "SubKeyCount":  0,
            "View":  0,
            "Handle":  {
                           "IsInvalid":  false,
                           "IsClosed":  false
                       },
            "ValueCount":  309,
            "Name":  "HKEY_LOCAL_MACHINE\\Software\\TST",
            "ComputerName":  "MYSERVER01",
            "Hive":  -2147483646,
            "Path":  "Software\\TST"
        },
"ServiceNow":  null,
"InstalledSoftware":  [
                          {
                              "Status":  true,
                              "Software":  [
                                               "Symantec NetBackup 7.5",
                                               "Symantec NetBackup Client",

                                           ],
                              "Version":  [
                                              "0000",
                                              "7.5",
                                          ]
                          },
                          {
                              "Status":  true,
                              "Software":  "Symantec Endpoint Protection",
                              "Version":  "12"
                          },
                          {
                              "Status":  true,
                              "Software":  "System Center 2012,
                              "Version":  "7.0"
                          }
                      ],
"AutoDuplex":  {
                   "Description":  "NIC Auto/Auto and Duplexing",
                   "Status":  true
               },

"DefaultAdGroups":  [
                        {
                            "Result":  true,
                            "Group":  "Domain Admins"
                        },
                        {
                            "Result":  true,
                            "Group":  "Test-Team"
                        },
                        {
                            "Result":  true,
                            "Group":  MYSERVER01-ADMINS"
                        }
                    ]

}

This is just a handful of objects that could be in my JSON file.

Currently I am making an ajax call form my jquery to read the file and send my jquery the json as a string. I am then parsing the data into json format.

I am a little confused on how I can display this information neatly using <ul>'s since there are so many arrays nested down deeply within the file.

I also am not sure how to dynamically iterate through each object in the json file. Before I started this, I was only used to seeing 1 object per file. This is a little different though and it is not as easy as specifying:

var jsonQC = jQuery.parseJSON(result); //result from controller
jsonQC[1]

Answer 1

How about using dl/dt/dd?

function makeDom(obj) {
    var $dl = $("<dl/>");
    $.each(obj, function(name, val) {
        $("<dt>").text(name).appendTo($dl);
        var $dd = $("<dd>");
        if(val && typeof val === "object") {
            $dd.append(makeDom(val));
        } else {
            $dd.text(val);
        }
        $dd.appendTo($dl);
    });
    return $dl;
}

var obj = {   
"DNS":  {
            "Server":  "MYSERVER01",
            "IP":  "XXX.XXX.XXX.XXX"
        },
"TST":  {
            "SubKeyCount":  0,
            "View":  0,
            "Handle":  {
                           "IsInvalid":  false,
                           "IsClosed":  false
                       },
            "ValueCount":  309,
            "Name":  "HKEY_LOCAL_MACHINE\\Software\\TST",
            "ComputerName":  "MYSERVER01",
            "Hive":  -2147483646,
            "Path":  "Software\\TST"
        },
"ServiceNow":  null,
"InstalledSoftware":  [
                          {
                              "Status":  true,
                              "Software":  [
                                               "Symantec NetBackup 7.5",
                                               "Symantec NetBackup Client",

                                           ],
                              "Version":  [
                                              "0000",
                                              "7.5",
                                          ]
                          },
                          {
                              "Status":  true,
                              "Software":  "Symantec Endpoint Protection",
                              "Version":  "12"
                          },
                          {
                              "Status":  true,
                              "Software":  "System Center 2012",
                              "Version":  "7.0"
                          }
                      ],
"AutoDuplex":  {
                   "Description":  "NIC Auto/Auto and Duplexing",
                   "Status":  true
               },

"DefaultAdGroups":  [
                        {
                            "Result":  true,
                            "Group":  "Domain Admins"
                        },
                        {
                            "Result":  true,
                            "Group":  "Test-Team"
                        },
                        {
                            "Result":  true,
                            "Group":  "MYSERVER01-ADMINS"
                        }
                    ]
};

$(function() {
    makeDom(obj).appendTo("body");
});

Fiddle here: http://jsfiddle.net/robbyn/0u21ewon/

Answer 2

There are some datatable jQuery plugins to display complext JSon data. Here is one example: https://editor.datatables.net/examples/advanced/deepObjects.html

Or, you can use recursive functions as explained here: jQuery JSON looping through nested objects