[英]Parse json structure with javascript
我正在使用ajax查询json api。 它给了我一个想像的树状结构。 样本响应如下所示
{
"nicos": {
"_lastconfig_": {
"poller": {
"alwayspoll": [],
"blacklist": [],
"neverpoll": [
"detector"
]
}
},
"poller": {
"alwayspoll": [],
"autosetup": true,
"blacklist": [],
"description": "",
"loglevel": "info",
"lowlevel": false,
"neverpoll": [
"detector"
],
"poll": []
}
}
}
现在,我想动态地对此进行解析并将其可视化为表格。 可能的输出可能是
<h1>nicos</h1>
<h2>_last_config_</h2>
<table>
<tr><td>alwayspoll</td><td>[]</td></tr>
<tr><td>blacklist</td><td>[]</td></tr>
<tr><td>neverpoll</td><td>[detector]</td></tr>
</table>
<h2>poller</h2>
<table>
<tr><td>alwayspoll</td><td>[]</td></tr>
<tr><td>autosetup</td><td>true</td></tr>
<tr><td>blacklist</td><td>[]</td></tr>
<tr><td>description</td><td></td></tr>
<tr><td>loglevel</td><td>info</td></tr>
<tr><td>lowlevel</td><td>false</td></tr>
<tr><td>neverpoll</td><td>[detector]</td></tr>
<tr><td>poll</td><td>[]</td></tr>
</table>
由于我是javascript的完全新手,因此我希望就如何实现这一点寻求一些建议。 阿贾克斯部分不是问题,但解析困扰我。
试试这个代码 :
function parse(obj){
var s = '<table>';
for(var k in obj){
if(typeof obj[k] === 'object'){
s += '<tr><td>'+k+'</td><td>'+parse(obj[k])+'</td></tr>\n';
}else{
s += '<tr><td>'+k+'</td><td>'+obj[k]+'</td></tr>\n';
}
}
return s + '</table>\n';
}
parse(myJson);
输出:
<table>
<tr><td>nicos</td><td>
<table>
<tr><td>_lastconfig_</td><td>
<table>
<tr><td>poller</td><td>
<table>
<tr><td>alwayspoll</td><td>
<table>
<tr><td>0</td><td>1</td></tr>
<tr><td>1</td><td>2</td></tr>
<tr><td>2</td><td>3</td></tr>
</table>
</td></tr>
<tr><td>blacklist</td><td>
<table>
<tr><td>0</td><td>X</td></tr>
<tr><td>1</td><td>Y</td></tr>
<tr><td>2</td><td>Z</td></tr>
</table>
</td></tr>
<tr><td>neverpoll</td><td>
<table>
<tr><td>0</td><td>detector</td></tr>
</table>
</td></tr>
</table>
</td></tr>
</table>
</td></tr>
<tr><td>poller</td><td>
<table>
<tr><td>alwayspoll</td><td>
<table>
</table>
</td></tr>
<tr><td>autosetup</td><td>true</td></tr>
<tr><td>blacklist</td><td>
<table>
</table>
</td></tr>
<tr><td>description</td><td></td></tr>
<tr><td>loglevel</td><td>info</td></tr>
<tr><td>lowlevel</td><td>false</td></tr>
<tr><td>neverpoll</td><td>
<table>
<tr><td>0</td><td>detector</td></tr>
</table>
</td></tr>
<tr><td>poll</td><td>
<table>
</table>
</td></tr>
</table>
</td></tr>
</table>
</td></tr>
</table>
(我在数组中添加了一些变量以表明它们也起作用)
可以使用诸如此类的代码将对象解析为定义列表 ( <dl>
)( 示例fiddle )。
function objToDefnList(obj) { // returns a `<dl>` node (not appended to DOM Tree)
var dl = document.createElement('dl'),
dt, dd, key;
for (key in obj) {
if (obj.hasOwnProperty(key)) {
// title
dt = document.createElement('dt');
dt.appendChild(document.createTextNode(key));
dl.appendChild(dt);
// defn.
dd = document.createElement('dd');
if (typeof obj[key] !== 'object') {
dd.appendChild(document.createTextNode(obj[key].toString()));
} else {
dd.appendChild(objToDefnList(obj[key])); // recurse
}
dl.appendChild(dd);
}
}
return dl; // done, return
}
可以很容易地对其进行修改,以使用所需的任何种类的列表(例如<ul>
, <ol>
)或显示更多信息(例如typeof obj[key]
)。 您可能需要对元素进行样式设置,请参见小提琴以获取示例。
感谢epascarello在<ul>
建议 <dl>
<ul>
。
JSON到HTML表格几乎可以肯定是一个发明的轮子:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.