動態顯示JSON文件內容

Question

我給出了一個包含可變數量對象的json文件，所有這些都是不同的。

這是我的JSON文件的一個例子。

{ 
"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" 
         } 
        ] 

}

這僅僅是一個對象，可能是我的JSON文件的屈指可數。

目前我正在做一個ajax調用窗體我的jquery讀取文件併發送我的jQuery作爲字符串。然後我將數據解析成json格式。

對於如何使用<ul>來整齊顯示這些信息，我有點困惑，因爲有太多的數組深深地嵌套在文件中。

我也不確定如何動態遍歷json文件中的每個對象。在開始之前，我只習慣每個文件看到1個對象。這是一個有點不同，雖然它不是那麼容易，因爲規定：

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

Answer 1

有一些數據表的jQuery插件顯示complext JSON數據。這裏有一個例子：https://editor.datatables.net/examples/advanced/deepObjects.html

或者，正如這裏解釋你可以使用遞歸函數：jQuery JSON looping through nested objects

Answer 2

如何使用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"); 
}); 

小提琴這裏：http://jsfiddle.net/robbyn/0u21ewon/