Dav*_*ler 5 javascript json nested list
我使用JSON(而不是XML)相当新,我目前正在使用Javascript来消化,解析和显示我返回的JSON数据.
我正在使用JSON2.js库并返回一些有效的JSON数据,表示一个相当简单的嵌套列表:
{
"node":{
"class":"folder",
"title":"Test Framework",
"node":{
"class":"folder",
"title":"Item 1",
"node":{
"class":"folder",
"title":"Item 1.1",
"node":{
"class":"file",
"title":"Item 1.1.a"
}
},
"node":{
"class":"folder",
"title":"Item 1.2",
"node":{
"class":"file",
"title":"Item 1.2.a"
},
"node":{
"class":"file",
"title":"Item 1.2.b"
},
"node":{
"class":"file",
"title":"Item 1.2.c"
}
},
"node":{
"class":"folder",
"title":"Item 1.3",
"node":{
"class":"folder",
"title":"Item 1.3.a",
"node":{
"class":"file",
"title":"Item 1.3.a.i"
},
"node":{
"class":"file",
"title":"Item 1.3.a.ii"
}
}
}
},
"node":{
"class":"folder",
"title":"Item 2",
"node":{
"class":"file",
"title":"item 2.a"
},
"node":{
"class":"file",
"title":"Item 2.b"
}
}
}
}
有没有人有任何指针可以快速将该批次转换为具有所有嵌套元素的UL？如果JSON中的"class"元素可以用作每个LI的类,那也很酷.
任何帮助深表感谢.
谢谢,
戴夫.
Als*_*nde 10
你的json不适合你的任务.某些对象具有多个具有相同名称的属性("节点"),因此它们相互重叠.您必须使用节点数组.这是一个工作数据结构和可以将其转换为嵌套列表的函数:
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<script type="text/javascript">
function parseNodes(nodes) { // takes a nodes array and turns it into a <ol>
var ol = document.createElement("OL");
for(var i=0; i<nodes.length; i++) {
ol.appendChild(parseNode(nodes[i]));
}
return ol;
}
function parseNode(node) { // takes a node object and turns it into a <li>
var li = document.createElement("LI");
li.innerHTML = node.title;
li.className = node.class;
if(node.nodes) li.appendChild(parseNodes(node.nodes));
return li;
}
window.jsonData = [{
"class": "folder",
"title": "Test Framework",
"nodes": [{
"class": "folder",
"title": "Item 1",
"nodes": [{
"class": "folder",
"title": "Item 1.1",
"nodes": [{
"class": "file",
"title": "Item 1.1.a"
}]
},
{
"class": "folder",
"title": "Item 1.2",
"nodes": [{
"class": "file",
"title": "Item 1.2.a"
},
{
"class": "file",
"title": "Item 1.2.b"
},
{
"class": "file",
"title": "Item 1.2.c"
}]
},
{
"class": "folder",
"title": "Item 1.3",
"nodes": [{
"class": "folder",
"title": "Item 1.3.a",
"nodes": [{
"class": "file",
"title": "Item 1.3.a.i"
},
{
"class": "file",
"title": "Item 1.3.a.ii"
}]
}]
}]
},
{
"class": "folder",
"title": "Item 2",
"nodes": [{
"class": "file",
"title": "item 2.a"
},
{
"class": "file",
"title": "Item 2.b"
}]
}]
}];
</script>
</head>
<body>
<input type="button"
onclick="document.body.appendChild(parseNodes(jsonData))"
value="go" />
</body>
</html>
我可以添加此css以使项目编号与节点标题匹配:)
<style type="text/css">
ol { list-style-type: none }
ol ol { list-style-type: decimal }
ol ol ol { list-style-type: decimal }
ol ol ol ol { list-style-type: lower-alpha }
ol ol ol ol ol { list-style-type: lower-roman }
</style>
| 归档时间： |
|
| 查看次数： |
9811 次 |
| 最近记录： |