如何在JavaScript中遞歸制作菜單和子菜單？

Question

我想遞歸地創建動態功能來渲染導航菜單和子菜單

我有對象的JSON數組，其中每個對象都是菜單項，菜單項可以具有子菜單，也可以具有子菜單。...我想您理解我的邏輯。

當前，每個對象都有標題和子菜單對象（可選）。

JSON對象

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

任何想法如何做到這一點？

Answer 1

例：

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

Answer 2

這是一個有關如何使用遞歸進入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); 

Answer 3

有幾個JavaScript庫可以生成帶有各種視覺輔助工具的動態菜單。 但是，如果您自己實施，則將使用以下成分：

• 容器HTML元素，應在其中放置菜單。
• JavaScript遞歸函數，用於為菜單創建DOM元素並將其放置在容器元素中
• 單擊處理程序，可通過樣式切換子菜單的可見性
• CSS，為菜單提供一些視覺提示，並提供顯示或隱藏子菜單的樣式

例如：

 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, true); 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> 

Answer 4

遍歷第n級嵌套數組列表，並根據需要在遞歸函數中編寫邏輯代碼。

我實現了這段代碼，用於為PrimeNG的上下文菜單生成菜單列表。

JSON數據-

    [
      {
        "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 /打字稿代碼-

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, command: (event) => { } });
          newList.push(returnedList);
        }
        else {
            // TODO : code you logic here
           // example : PrimeNG menuItem 
           // newList.push({ label: object[i].TITLE, command: (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);