如何在html中使用json值制作分层动态菜单？答案

【问题标题】：How to make hierarchical dynamic menu with json values in html?如何在html中使用json值制作分层动态菜单？
【发布时间】：2020-04-18 11:59:51
【问题描述】：

我有一个像上面这样的 json 列表。我有部分视图，它应该是网站中的左侧菜单。我有带有 ul li 值的代码和他们的 CSS。我想创建一个循环并将它们的值放在 ul li 值的 HTML 代码中。

var data =  [
        {
            name: 'A İLE BASLAYAN', link: '0', sub: null
        },
        {
            name: 'B İLE BASLAYAN', link: '1', sub: [
                { name: 'Bellona', link: '0-0', sub: null },
                { name: 'Beko', link: '0-1', sub: null },
                { name: 'Baykal', link: '0-2', sub: null }
            ]
        },
        {
            name: 'C İLE BASLAYAN', link: '2', sub: [
                { name: 'Ceyhan', link: '2-0', sub: null },
                { name: 'Cuma', link: '2-1', sub: null }
            ]
        },
        {
            name: 'D İLE BASLAYAN', link: '3', sub: [
                { name: 'Denizli', link: '3-1', sub: null },
                { name: 'Deve', link: '3-2', sub: null }
            ]
        }
    ]

【问题讨论】：

如果你愿意，至少，尝试建立这个循环，这将非常有帮助。努力，做一些研究，如果你遇到困难，请告诉我们。

标签： javascript html json dynamic

【解决方案1】：

如果有人和我有同样的情况，我有像 belove 这样的解决方案。

<div id="slideContainer"></div>
<script>
    var data = [
        {
            name: 'A İLE BASLAYAN',  sub: [
                { name: 'Asuman',  sub: null }
            ]
        },
        {
            name: 'B İLE BASLAYAN', link: '1', sub: [
                {
                    name: 'Bellona',  sub: [
                        { name: 'Bellona Bayi1',  sub: null },
                        { name: 'Bellona Bayi 2',  sub: null }]
                },
                { name: 'Beko',  sub: null },
                { name: 'Baykal', sub: null }
            ]
        },
        {
            name: 'C İLE BASLAYAN',  sub: [
                { name: 'Ceyhan', sub: null },
                { name: 'Cuma',  sub: null }
            ]
        },
        {
            name: 'D İLE BASLAYAN',  sub: [
                { name: 'Denizli',  sub: null },
                { name: 'Deve', sub: null }
            ]
        }
    ]
    var str = '<div id="m_aside_left" class="m-grid__item m-aside-left  m-aside-left--skin-dark "><div id="m_ver_menu" class="m-aside-menu  m-aside-menu--skin-dark m-aside-menu--submenu-skin-dark " m-menu-vertical="1" m-menu-scrollable="1" m-menu-dropdown-timeout="500" style="position: relative;">';
        str +='<ul class="m-menu__nav  m-menu__nav--dropdown-submenu-arrow ">';
    str += ' <li class="m-menu__item " aria-haspopup="true"><a href="index9bfb.html?page=index&amp;demo=default" class="m-menu__link "><i class="m-menu__link-icon flaticon-line-graph"></i><span class="m-menu__link-title">  <span class="m-menu__link-wrap">      <span class="m-menu__link-text"> <label for="exampleInputEmail1" class="col-form-label col-lg-3 col-sm-12">ARA</label></span>      <span class="m-menu__link-badge"><span class="m-badge m-badge--danger">2</span></span>  </span></span></a></li>';
    for (var i = 0; i < data.length; i++) {

        str += '<li class="m-menu__item  m-menu__item--submenu" aria-haspopup="true" m-menu-submenu-toggle="hover"><a href="javascript:;" class="m-menu__link m-menu__toggle"><i class="m-menu__link-icon flaticon-layers"></i><span class="m-menu__link-text">' + data[i].name + '</span><i class="m-menu__ver-arrow la la-angle-right"></i></a>'
        if (data[i].sub != null) {
            for (var j = 0; j < data[i].sub.length; j++) {

                if (data[i].sub[j].sub != null) {
                    str += '<div class="m-menu__submenu"><span class="m-menu__arrow"></span><ul class="m-menu__subnav"><li class="m-menu__item" aria-haspopup="true" m-menu-submenu-toggle="hover">';
                    str += '<a href="javascript:;" class="m-menu__link m-menu__toggle"><i class="m-menu__link-bullet m-menu__link-bullet--dot"><span></span></i><span class="m-menu__link-text">' + data[i].sub[j].name + '</span><i class="m-menu__ver-arrow la la-angle-right"></i></a>';
                    for (var k = 0; k < data[i].sub[j].sub.length; k++) {
                        str += '<div class="m-menu__submenu"><span class="m-menu__arrow"></span> <ul class="m-menu__subnav">  <li class="m-menu__item " aria-haspopup="true"><a href="index64cb.html?page=components/base/tabs/line&amp;demo=default" class="m-menu__link "><i class="m-menu__link-bullet m-menu__link-bullet--dot"><span></span></i><span class="m-menu__link-text">' + data[i].sub[j].sub[k].name + '</span></a></li></div>';
                    }
                    str += '</li></ul></div>';
                }
                else {
                str += '<div class="m-menu__submenu"><span class="m-menu__arrow"></span><ul class="m-menu__subnav">';
                str += '<li class="m-menu__item " aria-haspopup="true"><a href="indexd68c.html?page=components/base/state&amp;demo=default" class="m-menu__link "><i class="m-menu__link-bullet m-menu__link-bullet--dot"><span></span></i><span class="m-menu__link-text">' + data[i].sub[j].name + '</span></a></li>';
                str += '</ul></div>';
                }
            }
        }
    }
    str += '</li></ul> </div></div>';
    document.getElementById("slideContainer").innerHTML = str;
</script>

【讨论】：