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

Question

我有一个像上面这样的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 }
]
}
]

Answer 1

如果有人和我一样，我有像爱一样的解决方案。

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