將頁面上的JSON數據顯示爲可展開/可摺疊列表

我需要關於在可擴展/可摺疊列表等頁面上顯示JSON數據的幫助。將頁面上的JSON數據顯示爲可展開/可摺疊列表

這裏是一個有效的JSON I`ve作了從XML轉換使用Python：

，並顯示它我真的USIG這樣的：

<!DOCTYPE HTML> 
<head> 
    <title>JSON Tree View</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js" type="text/javascript"></script> 

</head> 
<script> 
function json_tree(object){ 
     var json="<ul>"; 
     for(prop in object){ 
      var value = object[prop]; 
      switch (typeof(value)){ 
       case "object": 
        var token = Math.random().toString(36).substr(2,16); 
        json += "<li><a class='label' href='#"+token+"' data-toggle='collapse'>"+prop+"="+value+"</a><div id='"+token+"' class='collapse'>"+json_tree(value)+"</div></li>"; 
       break; 
       default: 
       json += "<li>"+prop+"="+value+"</li>"; 
      } 
     } 
     return json+"</ul>"; 
} 
</script> 
<body style="margin: 40px;"> 
<h3>Paste JSON Into The Textarea Below and Click 'Build Tree'</h3> 

<textarea id="json" style="width: 100%;min-height:300px;"> 

</textarea> 
<button onclick="$('#output').html(json_tree(JSON.parse($('#json').val())));">Build Tree</button> 
<div id="output"> 

</div> 
</body> 
</html>

這是我得到的：

Image

我需要幫助「填充」（或與上層節點合併）那些「0」和「1」，以及 - 如何僅顯示沒有名稱的屬性值（或者如果你有一些更好的想法我怎麼能 dusplay這個列表）？

來源

2015-09-13 MilicaJ

請不要使用圖像，但寫問題的示例代碼（一張）。 – lifeisfoo

我不知道它是否有幫助，但我會使用瀏覽器的調試器和檢查器來查看這些對象字符串表示形式，並查看可以使用哪些方法/屬性來更精確地顯示它們。 –

如果您可以考慮使用JS庫，請考慮使用JSON Formatter或Render JSON。這兩個庫都提供配置選項，如主題，最大深度和排序。要顯示在使用JSON渲染一個可摺疊的形式，簡單的JSON字符串，可以使用

<script> 
    document.getElementById("test").appendChild(
     renderjson({ hello: [1,2,3,4], there: { a:1, b:2, c:["hello", null] } }) 
    ); 
</script>

來源

2017-07-26 08:53:00

將頁面上的JSON數據顯示爲可展開/可摺疊列表

回答

相關問題