從JSON對象創建嵌套列表動態

Question

我想實現的是，從一個JSON對象（多）這樣的（例子）開始：

[ 
    { 
     "geometry": { 
      "location": { 
       "lat": 37.3860517, 
       "lng": -122.0838511 
      }, 
      "viewport": { 
       "northeast": { 
        "lat": 37.4508789, 
        "lng": -122.0446721 
       }, 
       "southwest": { 
        "lat": 37.3567599, 
        "lng": -122.1178619 
       } 
      } 
     }, 
     "name": "Mountain View", 
     "scope": "GOOGLE", 
     "data": { 
      "customKey1": "customValue1", 
      "customKey2": { 
       "customSubKey1": { 
        "customSubSubKey1": "keyvalue" 
       } 
      }, 
     }, 
     "types": [ 
      "locality", 
      "political" 
     ] 
    } 
] 

不知道屬性或級別的名稱（因爲並非所有對象的元素都具有相同的屬性）創建一個基本的嵌套HTML列表，如this（其中鍵爲粗體且值正常）。

我已經嘗試過一些解決方案，以便從JSON創建一個列表，但這些解決方案需要屬性的名稱或知道對象的級別，在我的情況下，將會動態生成此對象。

是否可以從未知的JSON對象創建一個HTML列表？

Answer 1

這是我的嘗試。歡迎提出建議。

function createHTML(json, isArray){ 
 
    
 
    var html = '<ul>'; 
 
    for(var key in json){ 
 
     if(typeof json[key] == 'object'){ 
 
      
 
      html += '<li>' + (!isArray ? '<strong>'+ key +'</strong>' : '') + '</li>' + createHTML(json[key], (json[key] instanceof Array ? 1 : 0)); 
 
     } else { 
 
      html += '<li>'+ json[key] +'</li>'; 
 
     } 
 
    } 
 
    return html+'</ul>'; 
 

 
} 
 
    
 
var jsonData = [ 
 
\t { 
 
\t \t "geometry": { 
 
\t \t \t "location": { 
 
\t \t \t \t "lat": 37.3860517, 
 
\t \t \t \t "lng": -122.0838511 
 
\t \t \t }, 
 
\t \t \t "viewport": { 
 
\t \t \t \t "northeast": { 
 
\t \t \t \t \t "lat": 37.4508789, 
 
\t \t \t \t \t "lng": -122.0446721 
 
\t \t \t \t }, 
 
\t \t \t \t "southwest": { 
 
\t \t \t \t \t "lat": 37.3567599, 
 
\t \t \t \t \t "lng": -122.1178619 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t }, 
 
\t \t "name": "Mountain View", 
 
\t \t "scope": "GOOGLE", 
 
\t \t "data": { 
 
\t \t \t "customKey1": "customValue1", 
 
\t \t \t "customKey2": { 
 
\t \t \t \t "customSubKey1": { 
 
\t \t \t \t \t "customSubSubKey1": "keyvalue" 
 
\t \t \t \t } 
 
\t \t \t }, 
 
\t \t }, 
 
\t \t "types": [ 
 
\t \t \t "locality", 
 
\t \t \t "political" 
 
\t \t ] 
 
\t } 
 
]; 
 

 
document.getElementById('output').innerHTML = createHTML(jsonData, true);

<div id="output"></div>