リスト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