js怎样将获取json转换为树形结构-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

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

小旋风柴进 2016-03-26 11:45:28 2546

比如这样一段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>
JSON JavaScript 数据格式
分享到
取消 提交回答
全部回答(1)
  • 小旋风柴进
    2019-07-17 19:15:59

    下面的代码render是主函数,用来render你提供的json数据,它调用了renderMenu函数。

    function 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显示如下:
    screenshot

    0 0
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程