如何在JavaScript中递归生成菜单和子菜单？
我想使递归和动态的功能，渲染导航菜单和子菜单 我有一个JSON对象数组，其中每个对象都是菜单项，菜单项可以有子菜单，子菜单也可以有子菜单……我想你们理解我的逻辑 当前，每个对象都有标题和子菜单对象（可选） JSON对象如何在JavaScript中递归生成菜单和子菜单？,javascript,json,recursion,Javascript,Json,Recursion,我想使递归和动态的功能，渲染导航菜单和子菜单 我有一个JSON对象数组，其中每个对象都是菜单项，菜单项可以有子菜单，子菜单也可以有子菜单……我想你们理解我的逻辑 当前，每个对象都有标题和子菜单对象（可选） JSON对象 [ { title: "menu 1" submenus: [ { title: "sub menu1" }, { title: "sub menu2"
[
{
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 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>"
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>"
下面是一个关于如何使用递归进入JSON中每个菜单和子菜单的示例： var myJson='[{标题：菜单1，子菜单：['+ “{title:sub menu1}，”+ {标题：子菜单2，子菜单：[”+ “{title:subsub menu1，子菜单：[{title:susubsub menu1}]}，”+ “{标题：子菜单2}”+ ']}]},'+ “{标题：菜单2}]”； var obj=JSON.parsemyJson； 函数递归对象{ ifobject{ forvar i=0；i
有几个JavaScript库可以生成带有各种视觉辅助的动态菜单。但如果您自己实现它，您将使用以下成分： 一个容器HTML元素，菜单应该放在其中。 一个JavaScript递归函数，用于为菜单创建DOM元素并将它们放置在容器元素中 单击通过样式切换子菜单可见性的处理程序 CSS为菜单提供一些视觉线索，并提供显示或隐藏子菜单的样式 例如： 函数populateMenucontainer，菜单{ if！menu | |！menu.length返回； const ul=document.createElementul； 对于菜单的常量{title，子菜单}{ const li=document.createElementli； li.textContent=标题； li.className=leaf； 如果子菜单{ populateMenuli，子菜单，true； li.className=崩溃； li.addEventListenerclick，e=>{ 如果e.target！==e.currentTarget返回； e、 target.classList.toggleexpanded； e、 target.classList.togglecollapsed； }; } ul.appendChildli； } 容器。儿童； } //菜单定义示例： 常量菜单=[{title:menu1，子菜单：[{title:sub menu1}，{title:sub menu2，子菜单：[{title:subsubsub menu1，子菜单：[{title:susubsub menu1}]}，{title:subsubsub menu2}]}，{title:menu2}]； //提供DOM元素，其中 应插入以下内容： populateMenudocument.GetElementById菜单，菜单； li.collapsed>ul{display:none} ul{光标：指针} 李。崩溃了，李。扩大了，李。叶{ 位置：相对位置； 列表样式类型：无； 文本缩进：-2em； } li.扩展：在{content:'− ' } li.collapsed:在{content:'+'}之前 li.leaf:在{content:'○ ' }
遍历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"
}
],
}
]
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);
遍历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"
}
],
}
]
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);
请添加said JSON。@JackBashford我添加了JSON数组。到目前为止，您尝试了什么？请发布您解决手头问题的最佳尝试，以便人们能够实际帮助您改进您的解决方案。我尝试了一些方法，但我意识到我不知道如何解决。这就是我搜索解决方案的原因。请添加said JSON。@JackBashford我添加了JSON数组到目前为止，你有没有尝试过？请发布你解决手头问题的最佳尝试，这样人们才能真正帮助你改进你的解决方案我尝试了一些东西，但我意识到我不知道如何解决这个问题。这就是为什么我在寻找解决方案我也喜欢，以那种方式运行递归我也喜欢，以那种方式运行递归