Making Dropdown Menu With Multidimensional Array

I have a multidimensional object array like this. var categories = [{ text: 'engine', children: [1,2,3, { text: 'piston', children: [4,5,6] }] }, {

Solution 1:

Your code seems to work ok. At first it creates an unordered list (<ul>). Then goes through all elements of the input parameter and for each item create a list item element (<li>). If an element is an object then set its text to .text property of the item and recursively calls the same function with children of this item (.children) as parameters and append the result to previously created <li> element. Otherwise it just renders list item element with text being the same as the item.

Here is one simple fiddle using your code and some simple css (you should do it with click instead of hover): https://jsfiddle.net/zyuhqo3k/1/

functionmenuToElement(menu) {
    const ul = document.createElement("ul");
    for (const item of menu) {
        const li = document.createElement("li");
        if (Object(item) === item) {
            li.textContent = item.text + ' \u25BD';
            li.appendChild(menuToElement(item.children));
        } else {
            li.textContent = item;
        }
        ul.appendChild(li);
    }
    return ul;
}

var categories = [{ 
    text: "engine",
    children: [1,2,3, { 
        text: "piston",
        children: [4,5,6]
    }]   
}, {
    text: "tire",
    children: [7,8,9]
}];
const ul = menuToElement(categories);
document.getElementById("menu").appendChild(ul);

li > ul {
  display: none;
}

li:hover > ul {
  display: block;
}

<divid="menu"></div>

Solution 2:

Adapted Answer JS/jQuery based on code provided

HTML

<div id='myMenu' class="dropdown">

</div>

CSS

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu.dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}

jQuery

var categories = [{
  text: "engine",
  children: [1, 2, 3, {
    text: "piston",
    children: [4, 5, 6]
  }]
}, {
  text: "tire",
  children: [7, 8, 9]
}];

functionmenuToElement(menu) {
  const ul = document.createElement("ul");
  ul.className = 'dropdown-menu';
  for (const item of menu) {
    const li = document.createElement("li");
      if (Object(item) === item) {
        li.textContent = item.text;
        li.appendChild(menuToElement(item.children));
        li.className = "dropdown-submenu";
      } else {
        li.textContent = item;
      }
      ul.className = 'dropdown-menu';
      ul.appendChild(li);
    }
    return ul;
}

  $(document).ready(function() {

  var menu = menuToElement(categories);
  document.getElementById('myMenu').innerHTML = "<button class='btn btn-default dropdown-toggle' type='button' data-toggle='dropdown'>Categories<span class='caret'></span></button>";
  document.getElementById('myMenu').appendChild(menu);

  liList = document.getElementsByTagName('li');
  for (var i = 0; i < liList.length; i++) {
    items = liList[i].childNodes;
    if (items.length > 1)
    {
            liList[i].innerHTML = "<a class='test' tabindex='-1' href='#'>" + items[0].textContent+ "<span class='caret'></span></a>" + "<ul class='dropdown-menu'>" + items[1].innerHTML + "</ul>";
    }
    elseif (items.length == 1){
            liList[i].innerHTML = "<a class='test' tabindex='-1' href='#'>" + items[0].textContent + "</a>";    
        }
  }

    $('#myMenu a').on("click", function(e) {
      $(this).next('ul').toggle();
      e.stopPropagation();
      e.preventDefault();
    });
  });

Working JS Fiddle https://jsfiddle.net/2h8adqut/10/