开发者社区> 问答> 正文

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>

展开
收起
小旋风柴进 2016-03-26 11:45:28 4475 0
1 条回答
写回答
取消 提交回答
  • 下面的代码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

    2019-07-17 19:15:59
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
JavaScript面向对象的程序设计 立即下载
Delivering Javascript to World 立即下载
编程语言如何演化-以JS的private为例 立即下载