列出JS对象数组

Question

我在js中有一个数组，就像这样

menu = [
        {
            name: 'Item1',
            //submenuName: 'submenu-1',
        },
        {
            name: 'Item2',
            submenuName: 'submenu-2',
            sub: [
                {
                    name: 'Item2_1',
                    //submenuName: '',
                },
                {
                    name: 'Item2_2',
                    //submenuName: '',
                },
                {
                    name: 'Item2_3',
                    //submenuName: '',
                }
            ]
        },
        {
            name: 'Item3',
            //submenuName: 'submenu-3',
        }
    ]

我需要在ul标签中列出它们，但是每一层都必须在另一层之前关闭。

<ul data-menu="main">
  <li data-submenu>Item1</li>
  <li data-submenu='submenu-2'>Item2</li>
  <li data-submenu>Item3</li>
</ul>
<ul data-menu="submenu-2">
  <li data-submenu>Item2_1</li>
  <li data-submenu>Item2_2</li>
  <li data-submenu>Item2_3</li>
</ul>

诸若此类。我已经设法打印了它们，但只打印了第一层。不能打印下级！

Answer 1

如果菜单需要一个接一个地列出而不是嵌套，则在打印父菜单时维护一个菜单数组以打印并用子菜单填充该数组。

既然你提到了你正在使用jQuery，下面就是一个使用这个库的例子。

function generateMenu (menu, container) {
  var menus = [{name: 'main', entries: menu}];

  while (menus.length) {
    var current = menus.shift();

    var ul = $("<ul />").attr('data-menu', current.name);

    $.each(current.entries, function (index, menuItem) {
      var li = $('<li />')
                  .attr('data-submenu', menuItem.submenuName || '')
                  .text(menuItem.name);

      if ($.isArray(menuItem.sub)) {
        menus.push({name: menuItem.submenuName, entries: menuItem.sub});
      }

      li.appendTo(ul);
    });

    ul.appendTo(container);
  }
}

generateMenu(menu, $('body'));

JSFiddle example