List JS object array

Question

I have a an array in js it's something like this

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',
        }
    ]

And i need to list them in ul tag, but every level has to be closed before the other.

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

and so on. I've mange to print them but only the first level. Cannot print the sub level.

"I've mange to print them but only the first level" <- Add this code to question, and your failed attempt to print sub level. — sabithpocker
– sabithpocker, Commented Jan 19, 2017 at 7:08
I use JQ to print them $.each and check with dose the array has a sub array. They try to list him too, but don't know how to close the previews ul tag after the first level, not before — Peyo Peev
– Peyo Peev, Commented Jan 19, 2017 at 7:13

Rafael · Accepted Answer · 2017-01-19 07:41:10Z

1

If the menus need to be listed one after another and not nested, then maintain an array of menus to print and fill that array with submenus while printing parent menus.

Since you mentioned, that you're using jQuery, here is an example using this library.

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

edited Jan 19, 2017 at 7:41

answered Jan 19, 2017 at 7:38

Rafael

18.5k5 gold badges60 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Rafael Over a year ago

$ is jQuery. The author said in a comment that he uses jQuery.

Felix Kling Over a year ago

Ah, I missed the comment. Added the tag to the question.

Rafael Over a year ago

And I added info to my answer that it uses jQuery.

Peyo Peev Over a year ago

Hmm. It doesn't print them. In the log shows only [object Object]

Rafael Over a year ago

@PeyoPeev which logs do you mean? My JSFiddle example works for me, I can see the menu in the page. Can you please prepare a JSFiddle example with your code or a test website and post the URL here?

Collectives™ on Stack Overflow

List JS object array

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related