javascript - js怎样将获取json转换为树形结构-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

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

PHPz 2017-04-10 15:39:31

[JavaScript讨论组]

567

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

我怎样把他转换成

<p>
    <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>
</p>

PHPz

学习是最好的投资！

全部回复(3)

伊谢尔伦2017-04-10 15:41:31 3楼

下面的代码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 p = $('

<p/>

');
    return renderMenu(json, p);
}

var json = // 你的那段json代码
var menu = render(json);

在浏览器中检查menu显示如下：