【Web前端问题】js怎样将获取json转换为树形结构
比如这样一段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>
回答：
下面的代码render是主函数，用来render你提供的json数据，它调用了renderMenu函数。
javascriptfunction renderMenu(menu, parent) {var el = $('<a href="' + menu.link +'">' + menu.name + '</a>');
$(parent).append(el);
if (menu.isleaf) {
return parent;
}
var ul = $('<ul/>');
for (var i = 0; i < menu.children.length; ++i) {
var li = $('<li/>');
renderMenu(menu.children[i], li);
ul.append(li);
}
$(parent).append(ul);
return parent;
}
function render(json) {
var div = $('
<div/>
');
return renderMenu(json, div);
}
var json = // 你的那段json代码
var menu = render(json);
在浏览器中检查menu显示如下：
如果您觉得回答有帮助，就点个赞呗:-)
回答：
http://stackoverflow.com/questions/8553539/jquery-json-looping-through...
回答：
建议下载个jQuery EASYUI的API里面有关于树的解释，很清楚的
http://www.cnblogs.com/Philoo/archive/2011/11/17/jeasyui_api_index.htm...
回答：
生成一个json树，封装成插件
查看demo
; (function (window,document){ var toJsonTree = function(oArr,opts) {
if (!(this instanceof toJsonTree)) return new toJsonTree(oArr,opts);
this.opts = { rootId: 0, self: 'id', parent: 'parentId' };
if (opts) this._extend(this.opts,opts);
this.dataObj = {};
this.oData = oArr || [];
this.init();
return this['dataObj']['branch'][0];
}
toJsonTree.prototype = {
init: function () {
var _this = this;
this.oData.forEach(function (item) {
if (item[_this['opts']['self']] == _this['opts']['rootId']) {
_this.dataObj.branch = [];
_this.dataObj.branch.push(item);
_this._drawTree(_this.dataObj.branch);
};
});
},
_extend: function(obj1,obj2) {
for (var k in obj2) {
if (obj1[k]!=undefined) obj1[k]=obj2[k];
}
return obj1[k];
},
_drawTree: function (arr) {
var _this = this;
arr.forEach(function (item1) {
item1.branch = [];
_this.oData.forEach(function (item2) {
if (item2[_this['opts']['self']]!=_this['opts']['rootId'] && item1[_this['opts']['self']]==item2[_this['opts']['parent']]) {
item1.branch.push(item2);
_this._drawTree(item1.branch);
}
});
});
}
}
window.toJsonTree=toJsonTree;
}(window,document));
回答：
最近elementUI的级联选择器要用到 根据国内外方案 做了一个我需要的!
https://jsfiddle.net/stywell/...
var list = [ {
"ID": 1,
"FatherID": 0,
"TypeName": "风电",
"SortID": 2,
"Depth": 0,
"RootID": 1,
"IsFather": true
},
{
"ID": 2,
"FatherID": 1,
"TypeName": "风力发电",
"SortID": 11,
"Depth": 1,
"RootID": 1,
"IsFather": false
},
{
"ID": 13,
"FatherID": 1,
"TypeName": "风电整机",
"SortID": 13,
"Depth": 1,
"RootID": 1,
"IsFather": false
},
{
"ID": 23,
"FatherID": 1,
"TypeName": "叶片及材料",
"SortID": 14,
"Depth": 1,
"RootID": 1,
"IsFather": false
},
{
"ID": 33,
"FatherID": 1,
"TypeName": "发电机及元件",
"SortID": 15,
"Depth": 1,
"RootID": 1,
"IsFather": false
},
{
"ID": 44,
"FatherID": 1,
"TypeName": "塔筒/塔架",
"SortID": 16,
"Depth": 1,
"RootID": 1,
"IsFather": false
},
{
"ID": 54,
"FatherID": 1,
"TypeName": "控制系统",
"SortID": 18,
"Depth": 1,
"RootID": 1,
"IsFather": false
},
{
"ID": 65,
"FatherID": 0,
"TypeName": "核电",
"SortID": 4,
"Depth": 0,
"RootID": 65,
"IsFather": true
},
{
"ID": 77,
"FatherID": 65,
"TypeName": "核电站",
"SortID": 651,
"Depth": 1,
"RootID": 65,
"IsFather": false
},
{
"ID": 66,
"FatherID": 65,
"TypeName": "核电设备",
"SortID": 652,
"Depth": 1,
"RootID": 65,
"IsFather": false
},
{
"ID": 91,
"FatherID": 65,
"TypeName": "核电工程",
"SortID": 653,
"Depth": 1,
"RootID": 65,
"IsFather": false
},
{
"ID": 103,
"FatherID": 0,
"TypeName": "水电",
"SortID": 3,
"Depth": 0,
"RootID": 103,
"IsFather": true
},
{
"ID": 117,
"FatherID": 103,
"TypeName": "水电站",
"SortID": 1031,
"Depth": 1,
"RootID": 103,
"IsFather": false
},
{
"ID": 104,
"FatherID": 103,
"TypeName": "水电设备",
"SortID": 1032,
"Depth": 1,
"RootID": 103,
"IsFather": false
},
{
"ID": 130,
"FatherID": 103,
"TypeName": "水利水电设计院",
"SortID": 1033,
"Depth": 1,
"RootID": 103,
"IsFather": false
},
{
"ID": 136,
"FatherID": 103,
"TypeName": "水电工程",
"SortID": 1034,
"Depth": 1,
"RootID": 103,
"IsFather": false
},
{
"ID": 699,
"FatherID": 0,
"TypeName": "环保",
"SortID": 6,
"Depth": 0,
"RootID": 699,
"IsFather": true
},
{
"ID": 700,
"FatherID": 699,
"TypeName": "水处理",
"SortID": 6991,
"Depth": 1,
"RootID": 699,
"IsFather": true
},
{
"ID": 720,
"FatherID": 699,
"TypeName": "脱硫脱硝",
"SortID": 6992,
"Depth": 1,
"RootID": 699,
"IsFather": false
},
{
"ID": 740,
"FatherID": 699,
"TypeName": "环保设备",
"SortID": 6993,
"Depth": 1,
"RootID": 699,
"IsFather": false
},
{
"ID": 760,
"FatherID": 699,
"TypeName": "固废处理",
"SortID": 6994,
"Depth": 1,
"RootID": 699,
"IsFather": false
},
{
"ID": 780,
"FatherID": 699,
"TypeName": "环保发电",
"SortID": 6995,
"Depth": 1,
"RootID": 699,
"IsFather": false
},
{
"ID": 794,
"FatherID": 699,
"TypeName": "环保工程",
"SortID": 6998,
"Depth": 1,
"RootID": 699,
"IsFather": false
},
{
"ID": 811,
"FatherID": 699,
"TypeName": "除灰除尘",
"SortID": 69910,
"Depth": 1,
"RootID": 699,
"IsFather": false
},
{
"ID": 853,
"FatherID": 699,
"TypeName": "环境监测与评价",
"SortID": 69912,
"Depth": 1,
"RootID": 699,
"IsFather": false
},
{
"ID": 864,
"FatherID": 699,
"TypeName": "建筑节能",
"SortID": 69913,
"Depth": 1,
"RootID": 699,
"IsFather": false
},
{
"ID": 874,
"FatherID": 699,
"TypeName": "工业节能",
"SortID": 69914,
"Depth": 1,
"RootID": 699,
"IsFather": false
},
{
"ID": 881,
"FatherID": 699,
"TypeName": "合同能源管理",
"SortID": 69915,
"Depth": 1,
"RootID": 699,
"IsFather": false
},
{
"ID": 895,
"FatherID": 699,
"TypeName": "节能设备",
"SortID": 69916,
"Depth": 1,
"RootID": 699,
"IsFather": false
}
];
var list2 = [
{
"ID": 1,
"FatherID": -1,
"TypeName": "风电",
"SortID": 2,
"Depth": 0,
"RootID": 1,
"IsFather": true
},
{
"ID": 2,
"FatherID": 1,
"TypeName": "风力发电",
"SortID": 11,
"Depth": 1,
"RootID": 1,
"IsFather": false
},
{
"ID": 13,
"FatherID": 1,
"TypeName": "风电整机",
"SortID": 13,
"Depth": 1,
"RootID": 1,
"IsFather": false
},
{
"ID": 23,
"FatherID": 1,
"TypeName": "叶片及材料",
"SortID": 14,
"Depth": 1,
"RootID": 1,
"IsFather": false
},
{
"ID": 33,
"FatherID": 1,
"TypeName": "发电机及元件",
"SortID": 15,
"Depth": 1,
"RootID": 1,
"IsFather": false
},
{
"ID": 44,
"FatherID": 1,
"TypeName": "塔筒/塔架",
"SortID": 16,
"Depth": 1,
"RootID": 1,
"IsFather": false
},
{
"ID": 54,
"FatherID": 1,
"TypeName": "控制系统",
"SortID": 18,
"Depth": 1,
"RootID": 1,
"IsFather": false
},
{
"ID": 65,
"FatherID": -1,
"TypeName": "核电",
"SortID": 4,
"Depth": 0,
"RootID": 65,
"IsFather": true
},
{
"ID": 77,
"FatherID": 65,
"TypeName": "核电站",
"SortID": 651,
"Depth": 1,
"RootID": 65,
"IsFather": false
},
{
"ID": 66,
"FatherID": 65,
"TypeName": "核电设备",
"SortID": 652,
"Depth": 1,
"RootID": 65,
"IsFather": false
},
{
"ID": 91,
"FatherID": 65,
"TypeName": "核电工程",
"SortID": 653,
"Depth": 1,
"RootID": 65,
"IsFather": false
},
{
"ID": 103,
"FatherID": -1,
"TypeName": "水电",
"SortID": 3,
"Depth": 0,
"RootID": 103,
"IsFather": true
},
{
"ID": 117,
"FatherID": 103,
"TypeName": "水电站",
"SortID": 1031,
"Depth": 1,
"RootID": 103,
"IsFather": false
},
{
"ID": 104,
"FatherID": 103,
"TypeName": "水电设备",
"SortID": 1032,
"Depth": 1,
"RootID": 103,
"IsFather": false
},
{
"ID": 130,
"FatherID": 103,
"TypeName": "水利水电设计院",
"SortID": 1033,
"Depth": 1,
"RootID": 103,
"IsFather": false
},
{
"ID": 136,
"FatherID": 103,
"TypeName": "水电工程",
"SortID": 1034,
"Depth": 1,
"RootID": 103,
"IsFather": false
},
{
"ID": 699,
"FatherID": -1,
"TypeName": "环保",
"SortID": 6,
"Depth": 0,
"RootID": 699,
"IsFather": true
},
{
"ID": 700,
"FatherID": 699,
"TypeName": "水处理",
"SortID": 6991,
"Depth": 1,
"RootID": 699,
"IsFather": true
},
{
"ID": 720,
"FatherID": 699,
"TypeName": "脱硫脱硝",
"SortID": 6992,
"Depth": 1,
"RootID": 699,
"IsFather": false
},
{
"ID": 740,
"FatherID": 699,
"TypeName": "环保设备",
"SortID": 6993,
"Depth": 1,
"RootID": 699,
"IsFather": false
},
{
"ID": 760,
"FatherID": 699,
"TypeName": "固废处理",
"SortID": 6994,
"Depth": 1,
"RootID": 699,
"IsFather": false
},
{
"ID": 780,
"FatherID": 699,
"TypeName": "环保发电",
"SortID": 6995,
"Depth": 1,
"RootID": 699,
"IsFather": false
},
{
"ID": 794,
"FatherID": 699,
"TypeName": "环保工程",
"SortID": 6998,
"Depth": 1,
"RootID": 699,
"IsFather": false
},
{
"ID": 811,
"FatherID": 699,
"TypeName": "除灰除尘",
"SortID": 69910,
"Depth": 1,
"RootID": 699,
"IsFather": false
},
{
"ID": 853,
"FatherID": 699,
"TypeName": "环境监测与评价",
"SortID": 69912,
"Depth": 1,
"RootID": 699,
"IsFather": false
},
{
"ID": 864,
"FatherID": 699,
"TypeName": "建筑节能",
"SortID": 69913,
"Depth": 1,
"RootID": 699,
"IsFather": false
},
{
"ID": 874,
"FatherID": 699,
"TypeName": "工业节能",
"SortID": 69914,
"Depth": 1,
"RootID": 699,
"IsFather": false
},
{
"ID": 881,
"FatherID": 699,
"TypeName": "合同能源管理",
"SortID": 69915,
"Depth": 1,
"RootID": 699,
"IsFather": false
},
{
"ID": 895,
"FatherID": 699,
"TypeName": "节能设备",
"SortID": 69916,
"Depth": 1,
"RootID": 699,
"IsFather": false
}
];
var list3 = [
{
"tid": 1,
"parent": -1,
"TypeName": "风电",
"SortID": 2,
},
{
"tid": 2,
"parent": 1,
"TypeName": "风力发电",
"SortID": 11,
},
{
"tid": 13,
"parent": 1,
"TypeName": "风电整机",
"SortID": 13,
},
{
"tid": 23,
"parent": 1,
"TypeName": "叶片及材料",
"SortID": 14,
},
{
"tid": 33,
"parent": 1,
"TypeName": "发电机及元件",
"SortID": 15,
},
{
"tid": 44,
"parent": 1,
"TypeName": "塔筒/塔架",
"SortID": 16,
},
{
"tid": 54,
"parent": 1,
"TypeName": "控制系统",
"SortID": 18,
},
{
"tid": 65,
"parent": -1,
"TypeName": "核电",
"SortID": 4,
},
{
"tid": 77,
"parent": 65,
"TypeName": "核电站",
"SortID": 651,
},
{
"tid": 66,
"parent": 65,
"TypeName": "核电设备",
"SortID": 652,
},
{
"tid": 91,
"parent": 65,
"TypeName": "核电工程",
"SortID": 653,
},
{
"tid": 103,
"parent": -1,
"TypeName": "水电",
"SortID": 3,
},
{
"tid": 117,
"parent": 103,
"TypeName": "水电站",
"SortID": 1031,
},
{
"tid": 104,
"parent": 103,
"TypeName": "水电设备",
"SortID": 1032,
},
{
"tid": 130,
"parent": 103,
"TypeName": "水利水电设计院",
"SortID": 1033,
},
{
"tid": 136,
"parent": 103,
"TypeName": "水电工程",
"SortID": 1034,
},
{
"tid": 699,
"parent": -1,
"TypeName": "环保",
"SortID": 6,
},
{
"tid": 700,
"parent": 699,
"TypeName": "水处理",
"SortID": 6991,
},
{
"tid": 720,
"parent": 699,
"TypeName": "脱硫脱硝",
"SortID": 6992,
},
{
"tid": 740,
"parent": 699,
"TypeName": "环保设备",
"SortID": 6993,
},
{
"tid": 760,
"parent": 699,
"TypeName": "固废处理",
"SortID": 6994,
},
{
"tid": 780,
"parent": 699,
"TypeName": "环保发电",
"SortID": 6995,
},
{
"tid": 794,
"parent": 699,
"TypeName": "环保工程",
"SortID": 6998,
},
{
"tid": 811,
"parent": 699,
"TypeName": "除灰除尘",
"SortID": 69910,
},
{
"tid": 853,
"parent": 699,
"TypeName": "环境监测与评价",
"SortID": 69912,
},
{
"tid": 864,
"parent": 699,
"TypeName": "建筑节能",
"SortID": 69913,
},
{
"tid": 874,
"parent": 699,
"TypeName": "工业节能",
"SortID": 69914,
},
{
"tid": 881,
"parent": 699,
"TypeName": "合同能源管理",
"SortID": 69915,
},
{
"tid": 895,
"parent": 699,
"TypeName": "节能设备",
"SortID": 69916,
}
];
function list2tree(data, opt) {
opt = opt || {};
var KEY_ID = opt.key_id || 'ID';
var KEY_PARENT = opt.key_parent || 'FatherID';
var KEY_CHILD = opt.key_child || 'children';
var EMPTY_CHILDREN = opt.empty_children;
var ROOT_ID = opt.root_id || 0;
var MAP = opt.map || {};
function getNode(id) {
var node = []
for (var i = 0; i < data.length; i++) {
if (data[i][KEY_PARENT] == id) {
for (var k in MAP) {
data[i][k] = data[i][MAP[k]];
}
if (getNode(data[i][KEY_ID]) !== undefined) {
data[i][KEY_CHILD] = getNode(data[i][KEY_ID]);
} else {
if (EMPTY_CHILDREN === null) {
data[i][KEY_CHILD] = null;
} else if (JSON.stringify(EMPTY_CHILDREN) === '[]') {
data[i][KEY_CHILD] = [];
}
}
node.push(data[i]);
}
}
if (node.length == 0) {
return;
} else {
return node;
}
}
return getNode(ROOT_ID)
}
var opt = {
"key_id": "ID", //节点的ID
"key_parent": "FatherID", //节点的父级ID
"key_child": "children", //子节点的名称
"empty_children": [], //子节点为空时,填充的值 //这个参数为空时,没有子元素的元素不带key_child属性;还可以为null或者[],同理
"root_id": 0, //根节点的父级ID
"map": { //在节点内映射一些值 //对象的键是节点的新属性; 对象的值是节点的老属性,会赋值给新属性
"value": "ID",
"label": "TypeName",
}
}
//默认
// var res = list2tree(list});
//添加映射
// var res = list2tree(list, {
// map: {"value": "ID","label": "TypeName"}
// });
//设置子节点为空时的类型 可以为 [] null 或者 不存在那个属性
// var res = list2tree(list, {
// map: {"value": "ID","label": "TypeName"},
// empty_children: [],
// });
//根元素ID不为0时的情况
// var res = list2tree(list2, {
// map: {"value": "ID","label": "TypeName"},
// empty_children: [],
// root_id: -1,
// });
//全参数
var res = list2tree(list3, {
map: {
"value": "tid",
"label": "TypeName",
"foo": "tid",
},
//empty_children: null,
root_id: -1,
key_id: 'tid',
key_parent: 'parent',
key_child: 'nodes'
});
console.log(res);
document.write('<pre>');
document.write(JSON.stringify(res, null, 2));
以上是 【Web前端问题】js怎样将获取json转换为树形结构 的全部内容， 来源链接： utcz.com/a/142405.html
