テーブルAjaxのjQueryの

Question

に応じunkwonパース私は応答を取得する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を表示する必要がある場合はその上、データの性質に反復にいくつかの作業を行うプロパティのレベルを追跡してしました。

EDIT

私はあなたのJSONのプロパティの繰り返し処理を行う方法を示すために汚れた例をいくつか用意しました。 最初のものは、jsonデータ内の各サブオブジェクトに対して行を作成します。 2つ目は、jsonデータ内の各 'leaf'プロパティの列を出力します。基本はオブジェクトのプロパティを反復することを可能にするイテレータである

for(key in obj) 

イテレータです。また、jqueryの$.type関数を使用すると、変数が単純オブジェクトのオブジェクトであるかどうかを確認することができます。あなたは、テーブルにそのデータを解析することについてどのような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>