样例数据：var jsonData = [{"id":"1","pid":"0","name":"家用电器"}, {"id":"4","pid":"1","name":"大家电"}, {"id":"5","pid":"1","name":"生活电器"}, {"id":"2","pid":"0","name":"服饰"}, {"id":"3","pid":"0","name":"化妆"}, {"id":"7","pid":"4","name":"空调"}, {"id":"8","pid":"4","name":"冰箱"}, {"id":"9","pid":"4","name":"洗衣机"}, {"id":"10","pid":"4","name":"热水器"}, {"id":"11","pid":"3","name":"面部护理"}, {"id":"12","pid":"3","name":"口腔护理"}, {"id":"13","pid":"2","name":"男装"}, {"id":"14","pid":"2","name":"女装"}, {"id":"15","pid":"7","name":"海尔空调"}, {"id":"16","pid":"7","name":"美的空调"}, {"id":"19","pid":"5","name":"加湿器"}, {"id":"20","pid":"5","name":"电熨斗"}]
2、实现方法：
function creatTreeData(list){
var clonelist = JSON.parse(JSON.stringify(list))
var result =clonelist.filter(function(father){
var childlist = clonelist.filter(function(child){
return father.id= child.pid
})
if(childlist.length>0){
father.children=childlist
}
return father.pid ==0
})
return result
}
3、方法封装
function treeData(list,id,pid,children){
var clone = JSON.parse(JSON.stringify(list))
return clone.filter(function(father){
var childlist =clone.filter(function(child){
return father[id]==child[pid]
})
if(childlist.length>0){
father[children]=childlist
}
return father[pid]==0
})
}
json的“亲爸”就是JavaScript，还用转吗？
有2种方法直接使用json数据：
var jsonObject = eval("(" + jsonString + ")")
var jsonObject = JSON.parse(jsonString)
如果你想遍历转换后的json对象，可以用for in语句，具体用法请查阅JavaScript API。
比如这样一段json{
"name":"1级菜单1",
"link":"###",
"isleaf": false,
"level": 0,
"children": [
{
"name":"2级菜单1",
"link":"###",
"isleaf": false,
"level": 1,
"children": [
{
"name":"3级菜单1",
"link":"###",
"isleaf": true,
"level": 2,
"children": null
},
{
"name":"3级菜单2",
"link":"###",
"isleaf": true,
"level": 2,
"children": null
}
]
},
{
"name":"2级菜单2",
"link":"###",
"isleaf": false,
"level": 1,
"children": [
{
"name":"3级菜单3",
"link":"###",
"isleaf": true,
"level": 2,
"children": null
}
]
}
]
}
我怎样把他转换成
<div>
<a href="###">一级菜单</a>
<ul>
<li>
<a>2级菜单1</a>
<ul>
<li><a href="###">3级菜单1</a></li>
<li><a href="###">3级菜单2</a></li>
</ul>
</li>
<li>
<a href="###">2级菜单2</a>
.......
</li>
</ul>
</div>
