README.md

Build Unordered List Dynamically via JavaScript

See: https://jsfiddle.net/cosmointeractive/4yfhb7dw/

menu.js

// json config for menu entries 
let menuObj = [
  // ul
  {
    "attr": {
      "id": "pages-subnav",
      "class": "",
      "data-id": "pages-subnav"
    },
    "children": [
      // li
      {
        "attr": {
          "id": "",
          "class": ""
        },
        "children": [
          // href or html content
          {
            "attr": {
              "id": "",
              "class": "",
              "href": "#",
              "title": "",
              "alt": "",
              "style": {
                "display": "none"
              },
            },
            "option_link": {
              "class": "",
              "href": "#"
            },
            "text": "Edit Page #1"
          }, 
          {
            "attr": {
              "class": "tree"
            },
            "innerHTML": "<div>You can pass html directly into here</div>"
          }
        ],
        "sort": 0
      }
    ],
    "sort": 0,
    "heading": {
      "title": "",
      "description": ""
    }
  }
];

function parseHtml(menu){
  let $html = $('<div></div>');
  menu.forEach(function(ul){
    // console.log(ul);
    let $ul = $('<ul></ul>');

    ul.children.forEach(li => {
      // console.log(li);
      li.children.forEach(child => {
        let $li = $('<li></li>');
        $li.addClass(child.attr.class);
        console.log(child, typeof child.innerHTML);

        if(typeof child.innerHTML !== 'undefined'){
          $li.append(child.innerHTML);
        } else if(typeof child.attr !== 'undefined') {
          let $el = $('<a />');
          $el.text(child.text);
          $li.append($el);
        }

        $ul.append($li);
      });
    });

    $html.append($ul);
  });

  $('.js-menu').append($html);
}

parseHtml(menuObj);