unkwon Reaktion auf Tabelle ajax jquery Parsen

Question

ich eine API verwende Antwort zu erhalten, Ajax success, erhalte ich diese Art von Antwort

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

Ich möchte dies statt, dass aber zu table, analysieren, nur um probiere es aus, ich füge es an tag an. Aber es kommt als ein [Objekt Objekt]. Selbst wenn ich parseJSON mache, bekomme ich einen Fehler dafür.

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

Ist es möglich, etwas dynamischer zu gestalten, dass Sie kann diese Antwort umgehen?

UPDATE: Ich versuchte mit https://github.com/abodelot/jquery.json-viewer es funktionierte gut, aber ich möchte es analysieren Tabelle ist es möglich?

Answer 1

Verwenden Sie JSON.stringify(), um Antwortdaten in einer Zeichenfolge zu konvertieren, die Sie anzeigen können, und Sie können das Ergebnis dann in Ihr xmp-Tag einfügen.

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

Natürlich, wenn Sie Ihre JSON angezeigt werden müssen hierarchisch Sie haben einige Arbeit zu tun auf den Dateneigenschaften auf Iterieren, verfolgen Eigenschaften nivellieren und so weiter.

EDIT

ich ein paar schmutzige Beispiele vorbereitet, wie Iterieren über Ihre json Eigenschaften zeigt. Der erste erstellt eine Zeile für jedes Unterobjekt in JSON-Daten. Der zweite gibt eine Spalte für jede 'Blatt'-Eigenschaft in den JSON-Daten aus. Die Basis ist der Iterator, der es ermöglicht, über die Eigenschaft eines Objekts zu iterieren. Es gibt auch die Verwendung der $.type Funktion von jquery, mit der überprüft werden kann, ob eine Variable ein Objekt für einfache Objekte ist. Es handelt sich darum, wie man erkennen, ob ein var ist ein Objekt in reinen JS komplex sein können, wenn Sie möchten, einen Blick haben, können bei 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>