解析unkwon響應表AJAX的jQuery

Question

我使用一個API來獲取響應，在阿賈克斯success，我得到這樣的回答

{ 
    "Capabilities": { 
    "System": { 
     "SystemLogging": "true", 
     "SystemBackup": "true", 
     "StorageConfiguration": "false", 
     "RemoteDiscovery": "true", 
     "HttpSystemLogging": "false", 
     "HttpSystemBackup": "true", 
     "HttpSupportInformation": "false", 
     "HttpFirmwareUpgrade": "true", 
     "FirmwareUpgrade": "true", 
     "DiscoveryResolve": "false", 
     "DiscoveryBye": "true" 
    }, 
    "Security": { 
     "X.509Token": "false", 
     "UsernameToken": "true", 
     "TLS1.2": "false", 
     "TLS1.1": "false", 
     "TLS1.0": "false", 
     "SupportedEAPMethods": "0", 
     "SAMLToken": "false", 
     "RemoteUserHandling": "false", 
     "RELToken": "false", 
     "OnboardKeyGeneration": "false", 
     "MaxUsers": "32", 
     "MaxUserNameLength": "32", 
     "MaxPasswordLength": "16", 
     "KerberosToken": "false", 
     "HttpDigest": "true", 
     "Dot1X": "false", 
     "DefaultAccessPolicy": "true", 
     "AccessPolicyConfig": "false" 
    }, 
    "Network": { 
     "ZeroConfiguration": "true", 
     "NTP": "1", 
     "IPVersion6": "true", 
     "IPFilter": "true", 
     "HostnameFromDHCP": "true", 
     "DynDNS": "true", 
     "Dot1XConfigurations": "0", 
     "Dot11Configuration": "false", 
     "DHCPv6": "true" 
    } 
    } 
} 

我想分析這table，但不是隻是爲了嘗試一下，我將它附加到xmp標記。但它作爲[對象對象]來臨。即使我做parseJSON，我也會遇到錯誤。

"<xmp> 
    #{data} 
    </xm> 

是否可以做出更動態的東西，它可以處理這種反應？

更新：我嘗試使用https://github.com/abodelot/jquery.json-viewer它工作良好，但我想解析它表是可能的嗎？

Answer 1

使用JSON.stringify（）來轉換可以顯示的字符串中的響應數據，然後可以將結果放入xmp標記中。

$("xmp").text(JSON.stringify(data)); 

，如果你需要顯示你的JSON當然分層你已經做迭代上對數據性能有一定的工作，跟蹤性能水平等。

編輯

我準備了幾個髒的例子顯示如何循環訪問您的JSON屬性。 第一個爲json數據中的每個子對象創建一行。第二個爲json數據中的每個'leaf'屬性打印一列。基本的是

for(key in obj) 

迭代器，它允許迭代對象的屬性。也有使用jquery的$.type函數，它允許檢查變量是否是簡單對象的對象。如何檢測一個變種是純JS對象可能是複雜的，如果你願意，你可以看看Check if a value is an object in JavaScript

var data={ 
 
    "Capabilities": { 
 
    "System": { 
 
     "SystemLogging": "true", 
 
     "SystemBackup": "true", 
 
     "StorageConfiguration": "false", 
 
     "RemoteDiscovery": "true", 
 
     "HttpSystemLogging": "false", 
 
     "HttpSystemBackup": "true", 
 
     "HttpSupportInformation": "false", 
 
     "HttpFirmwareUpgrade": "true", 
 
     "FirmwareUpgrade": "true", 
 
     "DiscoveryResolve": "false", 
 
     "DiscoveryBye": "true" 
 
    }, 
 
    "Security": { 
 
     "X.509Token": "false", 
 
     "UsernameToken": "true", 
 
     "TLS1.2": "false", 
 
     "TLS1.1": "false", 
 
     "TLS1.0": "false", 
 
     "SupportedEAPMethods": "0", 
 
     "SAMLToken": "false", 
 
     "RemoteUserHandling": "false", 
 
     "RELToken": "false", 
 
     "OnboardKeyGeneration": "false", 
 
     "MaxUsers": "32", 
 
     "MaxUserNameLength": "32", 
 
     "MaxPasswordLength": "16", 
 
     "KerberosToken": "false", 
 
     "HttpDigest": "true", 
 
     "Dot1X": "false", 
 
     "DefaultAccessPolicy": "true", 
 
     "AccessPolicyConfig": "false" 
 
    }, 
 
    "Network": { 
 
     "ZeroConfiguration": "true", 
 
     "NTP": "1", 
 
     "IPVersion6": "true", 
 
     "IPFilter": "true", 
 
     "HostnameFromDHCP": "true", 
 
     "DynDNS": "true", 
 
     "Dot1XConfigurations": "0", 
 
     "Dot11Configuration": "false", 
 
     "DHCPv6": "true" 
 
    } 
 
    } 
 
}; 
 

 
function inspect(obj, level){ 
 
    retVal=""; 
 
    for(key in obj){ 
 
    if ($.type(obj[key])==="object"){ 
 
     
 
     retVal=retVal+"<tr><td><strong>"+key+"</strong></td></tr>"+inspect(obj[key])+"<BR>"; 
 
    } 
 
    else { 
 
     retVal=retVal+"<td><strong>"+ key+"</strong>:"+obj[key]+"</td>";    
 
    } 
 
    } 
 
    return retVal; 
 
     
 
} 
 
            
 
function toTable(obj, aTable){ 
 
    if(aTable==="undefined"|| aTable===null){ 
 
    aTable={}; 
 
    aTable.header=[]; 
 
    aTable.data=[] 
 
    } 
 
    
 
    for(key in obj){ 
 
    if ($.type(obj[key])==="object"){ 
 
     aTable=toTable(obj[key],aTable);  
 
    } 
 
    else { 
 
     aTable.header.push(key); 
 
     aTable.data.push(obj[key]); 
 
    } 
 
    } 
 
    return aTable; 
 
     
 
} 
 

 

 
var ret="<table id='tabular'>"+inspect(data)+"</table>"; 
 
$("#datas").html(ret); 
 

 
var asTable=toTable(data,null); 
 
var myTable="<table id='tabular2'><tr>"; 
 
for(var i=0;i<asTable.header.length;i++){ 
 
    myTable=myTable+"<td><strong>"+asTable.header[i]+"</strong></td>"; 
 
} 
 
myTable=myTable+"</tr><tr>"; 
 
for(var i=0;i<asTable.data.length;i++){ 
 
    myTable=myTable+"<td>"+asTable.data[i]+"</td>"; 
 
} 
 
myTable=myTable+"</tr></table>"; 
 
$("#datas2").html(myTable);

#tabular td {border:1px solid gray}; 
 
#tabular {border:1px solid gray; border-collapse:collapse} 
 

 
#tabular2 td {border:1px solid blue}; 
 
#tabular2 {border:1px solid blue; border-collapse:collapse}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <h3> EXAMPLE 1</h3> 
 
    <div id="datas"> 
 
    </div> 
 
    <!--<br><br>&nbsp;<br>--> 
 
    <h3> EXAMPLE 2</h3>  
 
    <div id="datas2"> 
 
    </div>