I want to make recursively and dynamic function for rendering navigation menu and submenus

I have JSON array of object where every object is menu item and menu item can have submenus and also submenu to have subsubmenus....I think you understand my logic.

Currently every object have title and submenus object optionally.

JSON object

[
{
    title: "menu 1"
    submenus: [
        {
            title: "sub menu1"
        },
        {
            title: "sub menu2"
            submenus: [
                {
                    title: "subsub menu1"
                    submenus: [
                        {
                            title: "susubsub menu1"
                        }
                    ]
                },
                {
                    title: 'subsub menu2"
                }
            ]
        }
    ]
},
{
    title: "menu 2"
}]

Any idea how to do this?

I want to make recursively and dynamic function for rendering navigation menu and submenus

I have JSON array of object where every object is menu item and menu item can have submenus and also submenu to have subsubmenus....I think you understand my logic.

Currently every object have title and submenus object optionally.

JSON object

[
{
    title: "menu 1"
    submenus: [
        {
            title: "sub menu1"
        },
        {
            title: "sub menu2"
            submenus: [
                {
                    title: "subsub menu1"
                    submenus: [
                        {
                            title: "susubsub menu1"
                        }
                    ]
                },
                {
                    title: 'subsub menu2"
                }
            ]
        }
    ]
},
{
    title: "menu 2"
}]

Any idea how to do this?

• javascript
• json
• recursion

Share Improve this question Follow edited Apr 19, 2019 at 11:04 Devmasta asked Apr 19, 2019 at 10:58 DevmastaDevmasta 57344 gold badges1414 silver badges4141 bronze badges 4

• Please add said JSON. – Jack Bashford Commented Apr 19, 2019 at 11:00
• @JackBashford I added JSON array – Devmasta Commented Apr 19, 2019 at 11:04
• 1 What have you tried so far? Please post your best attempt at solving the problem at hand so people can actually help you improve your solution – Aurelio Commented Apr 19, 2019 at 11:07
• I tried something but I realized I have no idea how to this. That's why I'm searching for solution – Devmasta Commented Apr 19, 2019 at 11:08

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

Traverse nth level nested array list and code your logic in recursive function as per requirement.

I implemented this code for generating a menu list for a context menu of PrimeNG.

JSON data -

    [
      {
        "TITLE": "parent1",
        "SUBMENU": [
          {
            "SUBMENU": [
              {
                "SUBMENU": [
                  {
                    "TITLE": "Child 1"
                  }
                ]
              },
              {
                "SUBMENU": [
                  {
                    "TITLE": "Child 3"
                  }
                ]
              },
              {
                "SUBMENU": [
                  {
                    "SUBMENU": [
                      {
                        "TITLE": "Child 4"
                      }
                    ]
                  },
                  {
                    "SUBMENU": [

                    ]
                  }
                ],

              },
              {
                "SUBMENU": [
                  {
                    "SUBMENU": [

                    ]
                  }
                ]
              }
            ],

          }
        ],

      },
      {
        "TITLE": "parent2",
        "SUBMENU": [
          {
            "TITLE": "Child 4"
          }
        ],

      }
    ]

JAVASCRIPT / Typescript Code -

traveRecusrivelist(object: any[]): any[] {
    if (object) {
      let newList: any[] = [];
      for (var i = 0; i < object.length; i++) {
        if (object[i].ITEMS && object[i].ITEMS.length > 0) {
            // TODO : code you logic here
           // create your own object and push in the newList array
          let returnedList = this.traveRecusrivelist(object[i].ITEMS);
          // Example : PrimeNG MenuItem creation
          // newList.push({ label: object[i].TITLE, items: returnedList, mand: (event) => { } });
          newList.push(returnedList);
        }
        else {
            // TODO : code you logic here
           // example : PrimeNG menuItem 
           // newList.push({ label: object[i].TITLE, mand: (event) => { } });
           // create your own object and push in the newList array
              newList.push(object[i]);
        }
      }
      return newList;
    }
  }

let list: any[] = [];
list = this.traveRecusrivelist(object);
console.log(list);

There are several JavaScript libraries that can produce dynamic menus with all kinds of visual aids. But if you implement it yourself, you would use these ingredients:

• A container HTML element in which the menu should be placed.
• A JavaScript recursive function to create the DOM elements for the menu and place them in the container element
• Click handlers which toggle the visibility of the submenus through styles
• CSS to give the menus some visual clues, and provide styles that show or hide the submenus

For example:

function populateMenu(container, menu) {
    if (!menu || !menu.length) return;
    const ul = document.createElement("ul");
    for (const {title, submenus} of menu) {
        const li = document.createElement("li");
        li.textContent = title;
        li.className = "leaf";       
        if (submenus) {
            populateMenu(li, submenus);
            li.className = "collapsed";       
            li.addEventListener("click", (e) => { 
                if (e.target !== e.currentTarget) return;
                e.target.classList.toggle("expanded");
                e.target.classList.toggle("collapsed");
            });
        }
        ul.appendChild(li);
    }
    container.appendChild(ul);
}

// Example menu definititon:
const menu = [{ title: "menu 1", submenus: [{ title: "sub menu1" }, { title: "sub menu2", submenus: [{ title: "subsub menu1", submenus: [{ title: "susubsub menu1"}]}, { title: "subsub menu2" }]}]}, { title: "menu 2" }];
// Provide the DOM element where the menu should be inserted:
populateMenu(document.getElementById("menu"), menu);

li.collapsed > ul { display: none }
ul { cursor: pointer }
li.collapsed, li.expanded, li.leaf {
    position: relative;
    list-style-type: none;
    text-indent: -2em;
}
li.expanded:before { content: '−  ' }
li.collapsed:before { content: '+  ' }
li.leaf:before { content: '○  ' }

<div id="menu"></div>

Example:

  var a = {
  "menu1": {
     title: "menu1"
   },
   "menu2": {
     title: "menu2",
     submenu: {
       "menu3" : {
          title : "menu3"
        },
       "menu4": {
         title: "menu4",
         submenu: {
          "menu5": {
           title: "menu5"
         }
       }
     }
   }
  }
 }



 function printMenu(menu){
     if(!menu) return "";

     var str = "";
     for(var i in menu)
     {
         if(menu[i].submenu)
            str+= "<li>"+menu[i].title+"<ul>"+printMenu(menu[i].submenu)+"</ul></li>";
         else
            str+= "<li>"+menu[i].title+"</li>";
     }
     return str;
 };

printMenu(a); // "<li>menu1</li><li>menu2<ul><li>menu3</li><li>menu4<ul><li>menu5</li></ul></li></ul></li>"

Here's an example on how to use recursion to go inside every single menu and submenu in your JSON :

var myJson ='[{"title": "menu 1", "submenus": ['+
        '{"title": "sub menu1"},'+
        ' {"title": "sub menu2", "submenus": ['+
              ' {"title": "subsub menu1", "submenus": [{"title": "susubsub menu1"}]},'+
                ' {"title": "subsub menu2"}'+
            ']}]},'+
'{"title": "menu 2"}]';
var obj = JSON.parse(myJson);

function recursive(object){
  if(object){
    for(var i = 0; i < object.length; i++){
      console.log(object[i].title);
        recursive(object[i].submenus);
    }
  }
}
recursive(obj);