javascript - 在JQ中打印obj数组

Question

首先要说的是，我是 JQ 和 JS 的新手，我需要一些帮助。 我怎样才能打印这个数组

var menu = [
            {
                name: 'Item1',
                submenuName: 'submenu-1',
                subMenu:[
                         {
                            name: 'Item1_1',
                            submenuName: 'submenu-1-1',
                            subMenu:[
                                 {
                                    name: 'Item1_1_1',
                                    submenuName: 'submenu-1-1-1',
                                    subMenu:[
                                             {
                                                name: 'Item1_1_1_1',
                                                submenuName: 'submenu-1-1-1-1',
                                                subMenu:[
                                                         {
                                                            name: 'Item1_1_1_1_1',
                                                            //submenuName: 'submenu-1-1-2',
                                                         },
                                                ]
                                             },
                                             {
                                                name: 'Item1_1_1_2',
                                                //submenuName: 'submenu-1-1-2',
                                             }
                                    ]
                                 },
                                 {
                                    name: 'Item1_1_2',
                                    //submenuName: 'submenu-1-1-2',
                                 },
                            ]
                         },
                         {
                            name: 'Item1_2',
                            //submenuName: 'submenu-1-2',
                         },
                         {
                            name: 'Item1_3',
                            //submenuName: 'submenu-1-3',
                         }
                ]
            },
            {
                name: 'Item2',
                //submenuName: 'submenu-2',
            }
];

像这样查看 html

<ul data-menu="main" class="menu__level">
    <li class="menu__item"><a class="menu__link" data-submenu="submenu-1" href="#">Item1</a></li>
        <ul data-menu="submenu-1" class="menu__level">
            <li class="menu__item"><a class="menu__link" data-submenu="submenu-1-1" href="#">Item1_1</a></li>
                <ul data-menu="submenu-1-1" class="menu__level">
                    <li class="menu__item"><a class="menu__link" data-submenu="submenu-1-1-1" href="#">Item1_1_1</a></li>   
                        <ul data-menu="submenu-1-1-1" class="menu__level">
                            <li class="menu__item"><a class="menu__link" data-submenu="submenu-1-1-1-1" href="#">Item1_1_1_1</a></li>
                                <ul data-menu="submenu-1-1-1-1" class="menu__level">
                                    <li class="menu__item"><a class="menu__link" href="#">Item1_1_1_1_1</a></li>
                                </ul>

                            <li class="menu__item"><a class="menu__link" href="#">Item1_1_1_2</a></li>
                        </ul>
                    <li class="menu__item"><a class="menu__link" href="#">Item1_1_2</a></li>
                </ul>
            <li class="menu__item"><a class="menu__link" href="#">Item1_2</a></li>
            <li class="menu__item"><a class="menu__link" href="#">Item1_3</a></li>

        </ul>
        <li class="menu__item"><a class="menu__link" href="#">Item2</a></li>
</ul>

我知道我的问题很愚蠢，但我不知道如何提出。这将是一个下拉菜单。

Answer 1

使用递归:

function getMenuHTML(arr, name) {
  var result = '<ul data-menu="' + (name || 'main') + '" class="menu__level">';
  for (var i = 0; i < arr.length; i++) {
     result += '<li class="menu__item"><a class="menu__link"' + (arr[i].submenuName ? 'data-submenu="' + arr[i].submenuName + '"' : '') + ' href="#">' + arr[i].name + '</a></li>';
     if (arr[i].subMenu && arr[i].subMenu.length) {
        result += getMenuHTML(arr[i].subMenu, arr[i].submenuName);
     }
  }
  result += "</ul>";
  return result;
}

var menu=[{name:'Item1',submenuName:'submenu-1',subMenu:[{name:'Item1_1',submenuName:'submenu-1-1',subMenu:[{name:'Item1_1_1',submenuName:'submenu-1-1-1',subMenu:[{name:'Item1_1_1_1',submenuName:'submenu-1-1-1-1',subMenu:[{name:'Item1_1_1_1_1'},]},{name:'Item1_1_1_2'}]},{name:'Item1_1_2'},]},{name:'Item1_2'},{name:'Item1_3'}]},{name:'Item2'}];

var html = getMenuHTML(menu);
document.getElementById('resultplain').value = html;
document.getElementById('result').insertAdjacentHTML('beforeend', html);

<nav id="result"></nav>
<textarea id="resultplain" style="height: 250px;width:100%"></textarea>