使用JSON和Javascript生成嵌套UL列表
使用JSON和Javascript生成嵌套UL列表
提问于 2015-03-17 03:13:42
我的最终目标是创建一个HTML列表。列表是在JSON字符串中定义的。例子：-
{“cluster”: [
{“name”:”SEIR”,”cluster”:[
{“name”:”TR 0.25”,”cluster”:[
{“name”:”RR 0.30”,”member”:[“sim1”,”sim5”,”sim10”]},
{“name”:”RR 0.35”,”member”:[“sim3”,”sim7”,”sim15”]},
{“name”:”RR 0.40”,”member”:[“sim6”,”sim9”,”sim25”]}
]},
{“name”:”TR 0.5”,”cluster”:[
{“name”:”RR 0.30”,”member”:[“sim1”,”sim5”,”sim10”]},
{“name”:”RR 0.35”,”member”:[“sim3”,”sim7”,”sim15”]},
{“name”:”RR 0.40”,”member”:[“sim6”,”sim9”,”sim25”]}
]}
]},
{“name”:”SIR”,”cluster”:[
{“name”:”TR 0.25”,”cluster”:[
{“name”:”RR 0.30”,”member”:[“sim1”,”sim5”,”sim10”]},
{“name”:”RR 0.35”,”member”:[“sim3”,”sim7”,”sim15”]},
{“name”:”RR 0.40”,”member”:[“sim6”,”sim9”,”sim25”]}
]},
{“name”:”TR 0.5”,”cluster”:[
{“name”:”RR 0.30”,”member”:[“sim1”,”sim5”,”sim10”]},
{“name”:”RR 0.35”,”member”:[“sim3”,”sim7”,”sim15”]},
{“name”:”RR 0.40”,”member”:[“sim6”,”sim9”,”sim25”]}
]}
]}
]}预期的输出HTML列表如下所示：
<UL>
<LI>SEIR
<UL>
<LI>TR 0.25
<UL>
<LI>RR 0.25
<UL>
<LI>sim1</LI>
<LI>sim5</LI>
<LI>sim10</LI>
</UL>
</LI>
<LI>RR 0.50
<UL>
<LI>sim3</LI>
<LI>sim7</LI>
<LI>sim15</LI>
</UL>
</LI>
</UL>
</LI>
<LI>TR 0.25
<UL>
<LI>RR 0.25
<UL>
<LI>sim1</LI>
<LI>sim5</LI>
<LI>sim10</LI>
</UL>
</LI>
<LI>RR 0.50
<UL>
<LI>sim6</LI>
<LI>sim9</LI>
<LI>sim25</LI>
</UL>
</LI>
</UL>
</LI>
</UL>
</LI>
.
.
.
.
.我编写了以下javascript代码
function appendClusterNode(data){
var liNode = document.createElement('li');
var textNode = document.createTextNode(data.name);
liNode.appendChild(textNode);
if(data['cluster']){
alert('Cluster Present');
var newULNode = document.createElement('ul');
var tempNode;
for (var cluster = 0 ; cluster < data.cluster.length ; cluster++){
alert(data.cluster[cluster].name);
tempNode = appendClusterNode(data.cluster[cluster]);
newULNode.appendChild(tempNode);
}
liNode.appendChild(newULNode);
}else{
if('member'){
var ulNode = createElement('ul');
var tempLINode;
for (var member = 0 ; member < data.member.length ; member++){
tempLINode = document.createElement('li');
tempLINode.appendChild(document.createTextNode(data.member[member]));
ulNode.appendChild(tempLINode);
}
liNode.appendChild(ulNode);
}
}
return liNode;
}
function appendRootNode(node, data){
var ulNode = document.createElement('ul');
var liNode = document.createElement('li');
var textNode = document.createTextNode(data.name);
liNode.appendChild(textNode);
if(data['cluster']){
var newULNode = document.createElement('ul');
var tempNode;
for (var cluster = 0 ; cluster < data.cluster.length; cluster++){
alert(data.cluster[cluster].name);
tempNode = appendClusterNode(data.cluster[cluster]);
newULNode.appendChild(tempNode);
}
liNode.appendChild(newULNode);
}
ulNode.appendChild(liNode);
node.appendChild(ulNode);
}
//Below is the simple JSON UL string
var JSONString = '{"name":"Epidemic","cluster":[{"name":"SEIR","cluster":[{"name":"RR 0.30","member":["sim1","sim5","sim10"]},{"name":"RR 0.35","member":["sim3","sim7","sim15"]}]},{"name":"SIR","member":["1","2","3"]}]}';
var JSONData = JSON.parse(JSONString);
appendRootNode(document.getElementById("hierarchy"), JSONData);此代码没有产生所需的输出。我想我在一个函数中出错了。
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-03-18 18:49:56
下面的代码对我有用-
function appendMemberNode(data){
var mULNode = document.createElement('ul');
var mLINode;
var mTextNode;
for (var i = 0 ; i < data.length ; i++){
mLINode = document.createElement('li');
mTextNode = document.createTextNode(data[i].name);
mLINode.appendChild(mTextNode);
if (i == data.length-1){
mLINode.setAttribute("class","member last");
}else{
mLINode.setAttribute("class","member");
}
mULNode.appendChild(mLINode);
}
return mULNode
}
function appendClusterNode(data){
var cULNode = document.createElement('ul');
var cLINode;
var cTextNode;
for (var i = 0 ; i < data.length ; i++){
cLINode = document.createElement('li');
cTextNode = document.createTextNode(data[i].name);
cLINode.appendChild(cTextNode);
if (data[i]['cluster']){
var cTempNode = appendClusterNode(data[i].cluster);
cLINode.appendChild(cTempNode);
}else{
// Has leaf Nodes i.e. Has Members
var mTempNode = appendMemberNode(data[i].member);
cLINode.appendChild(mTempNode);
}
if (i == data.length-1){
cLINode.setAttribute("class","last");
}
cULNode.appendChild(cLINode);
}
return cULNode;
}
function appendRootNode(node, data){
var rootULNode = document.createElement('ul');
var rootLINode = document.createElement('li');
var rootTextNode = document.createTextNode(data.name);
rootLINode.appendChild(rootTextNode);
if (data['cluster']){
var tempNode = appendClusterNode(data.cluster);
rootLINode.appendChild(tempNode);
}
rootULNode.appendChild(rootLINode);
rootULNode.setAttribute("class","collapsibleList");
rootULNode.setAttribute("id","clustering");
node.appendChild(rootULNode);
}我想我可能还在优化代码。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29090700
复制相关文章
相似问题
腾讯云开发者
