读书人

超级着急大神如何把这段json用js循环

发布时间: 2012-10-28 09:54:44 作者: rapoo

超级着急!大神,怎么把这段json用js循环取生成带有链接的children子项html效果(如json数据下面)
var yixuan_navs = [ {
"id" : "19",
"name" : "\u90e8\u5c5e\u5355\u4f4d",
"code" : "6-4",
"children" : [{
"id" : "34",
"tid" : "19",
"lid" : "0",
"name" : "\u6cb3\u5317\u7701\u5de5\u4e1a\u548c\u4fe1\u606f\u5316\u5385",
"domain" : "ii.gov.cn",
"secdomain" : "",
"url" : "http:\/\/www.ii.gov.cn\/index.html"
}, {
"id" : "42",
"tid" : "19",
"lid" : "0",
"name" : "\u6e56\u5357\u7701\u5de5\u4e1a\u548c\u4fe1\u606f\u5316\u5385",
"domain" : "hainan.gov.cn",
"secdomain" : "",
"url" : "http:\/\/iitb.hainan.gov.cn\/hnsgxt\/"
}, {
"id" : "56",
"tid" : "19",
"lid" : "0",
"name" : "\u5409\u6797\u7701\u5de5\u4e1a\u548c\u4fe1\u606f\u5316\u5385",
"domain" : "gxt.jl.gov.cn",
"secdomain" : "",
"url" : "http:\/\/gxt.jl.gov.cn\/"
}]
}, {
"id" : "21",
"name" : "\u5171\u5efa\u9ad8\u6821",
"code" : "6-6",
"children" : []
}, {
"id" : "23",
"name" : "\u56fd\u9632\u79d1\u5de5\u529e",
"code" : "6-7",
"children" : [{
"id" : "39",
"tid" : "23",
"lid" : "0",
"name" : "\u6cb3\u5317\u7701\u56fd\u9632\u79d1\u5de5\u5c40",
"domain" : "hbjg.gov.cn",
"secdomain" : "",
"url" : "http:\/\/www.hbjg.gov.cn\/"
}, {
"id" : "53",
"tid" : "23",
"lid" : "0",
"name" : "\u6e56\u5357\u7701\u56fd\u9632\u79d1\u5b66\u6280\u672f\u5de5\u4e1a\u529e",
"domain" : "hngfkgb.gov.cn",
"secdomain" : "",
"url" : "http:\/\/www.hngfkgb.gov.cn\/"
}]
}]
效果:</head>
<body>
<div class="">
<div id="19">
<script type="text/javascript">
document.write("\u90e8\u5c5e\u5355\u4f4d")
</script>
</div>
<ul class="">
<li id="34">
<a href="http:\/\/www.ii.gov.cn\/index.html">
<script type="text/javascript">
document.write("\u6cb3\u5317\u7701\u5de5\u4e1a\u548c\u4fe1\u606f\u5316\u5385");
</script></a>
</li>

<li id="42">
<a href="http:\/\/iitb.hainan.gov.cn\/hnsgxt\/">
<script type="text/javascript">
document.write("\u6e56\u5357\u7701\u5de5\u4e1a\u548c\u4fe1\u606f\u5316\u5385");


</script></a>
</li>

<li id="56">
<a href="http:\/\/gxt.jl.gov.cn\/">
<script type="text/javascript">
document.write("\u5409\u6797\u7701\u5de5\u4e1a\u548c\u4fe1\u606f\u5316\u5385");
</script></a>
</li>
</ul>
<div id="20">
<script type="text/javascript">
document.write("\u90e8\u5c5e\u9ad8\u6821")
</script>
</div>
<ul class=""></ul>
<div id="21">
<script type="text/javascript">
document.write("\u5171\u5efa\u9ad8\u6821")
</script>
</div>
<ul class=""></ul>
<div id="23">
<script type="text/javascript">
document.write("\u56fd\u9632\u79d1\u5de5\u529e")
</script>
</div>
<ul class="">

<li id="39">
<a href="http:\/\/www.hbjg.gov.cn\/">
<script type="text/javascript">
document.write("\u6cb3\u5317\u7701\u56fd\u9632\u79d1\u5de5\u5c40");
</script></a>
</li>

<li id="53">
<a href="http:\/\/www.hngfkgb.gov.cn\/">
<script type="text/javascript">
document.write("\u6e56\u5357\u7701\u56fd\u9632\u79d1\u5b66\u6280\u672f\u5de5\u4e1a\u529e");
</script></a>
</li>

</ul>
</div>
</body>
</html>


[解决办法]

HTML code
<script>document.onready = function(){    var yixuan_navs = [ {      "id" : "19",      "name" : "\u90e8\u5c5e\u5355\u4f4d",      "code" : "6-4",      "children" : [{      "id" : "34",      "tid" : "19",      "lid" : "0",      "name" : "\u6cb3\u5317\u7701\u5de5\u4e1a\u548c\u4fe1\u606f\u5316\u5385",      "domain" : "ii.gov.cn",      "secdomain" : "",      "url" : "http:\/\/www.ii.gov.cn\/index.html"      }, {      "id" : "42",      "tid" : "19",      "lid" : "0",      "name" : "\u6e56\u5357\u7701\u5de5\u4e1a\u548c\u4fe1\u606f\u5316\u5385",      "domain" : "hainan.gov.cn",      "secdomain" : "",      "url" : "http:\/\/iitb.hainan.gov.cn\/hnsgxt\/"      }, {      "id" : "56",      "tid" : "19",      "lid" : "0",      "name" : "\u5409\u6797\u7701\u5de5\u4e1a\u548c\u4fe1\u606f\u5316\u5385",      "domain" : "gxt.jl.gov.cn",      "secdomain" : "",      "url" : "http:\/\/gxt.jl.gov.cn\/"      }]    }, {      "id" : "21",      "name" : "\u5171\u5efa\u9ad8\u6821",      "code" : "6-6",      "children" : []    }, {      "id" : "23",      "name" : "\u56fd\u9632\u79d1\u5de5\u529e",      "code" : "6-7",      "children" : [{      "id" : "39",      "tid" : "23",      "lid" : "0",      "name" : "\u6cb3\u5317\u7701\u56fd\u9632\u79d1\u5de5\u5c40",      "domain" : "hbjg.gov.cn",      "secdomain" : "",      "url" : "http:\/\/www.hbjg.gov.cn\/"      }, {      "id" : "53",      "tid" : "23",      "lid" : "0",      "name" : "\u6e56\u5357\u7701\u56fd\u9632\u79d1\u5b66\u6280\u672f\u5de5\u4e1a\u529e",      "domain" : "hngfkgb.gov.cn",      "secdomain" : "",      "url" : "http:\/\/www.hngfkgb.gov.cn\/"      }]    }];        var html = [];    for (var i = 0; i < yixuan_navs.length; i++) {        var item = yixuan_navs[i];        var child = item.children;        html.push("<div id='"+item.id+"'>"+ item.name +"</div>");        html.push("<ul>");                for (var j = 0; j < child.length; j++) {            html.push("<li id='"+child[j].id+"'><a href='"+child[j].url+"'>"+child[j].name+"</a></li>");        }                html.push("</ul>");    }        document.write(html.join(""));};</script> 

读书人网 >JavaScript

热点推荐