js怎样将获取json转换为树形结构

Question

比如这样一段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>

Answer 1

下面的代码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显示如下：

如果您觉得回答有帮助，就点个赞呗:-)

Answer 2

http://stackoverflow.com/questions/8553539/jquery-json-looping-through...

Answer 3

建议下载个jQuery EASYUI的API里面有关于树的解释，很清楚的
http://www.cnblogs.com/Philoo/archive/2011/11/17/jeasyui_api_index.htm...

Answer 4

生成一个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));

Answer 5

最近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));