Список 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 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