我想要实现的是,从这样的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(其中键为粗体,值为正常)。
我在SO上尝试了一些解决方案来创建一个JSON列表,但这些解决方案需要属性的名称或者知道对象的级别,在我的例子中,这个对象将动态生成。
是否可以从未知的JSON对象创建HTML列表?
答案 0 :(得分: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 = [
{
"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"
]
}
];
document.getElementById('output').innerHTML = createHTML(jsonData, true);
<div id="output"></div>