Cree listas UL anidadas a partir del objeto de datos
Estoy tratando de crear una UL anidada a partir de JSON. Puedo recorrer y tomar los datos del objeto, pero tengo problemas para construir el UL anidado. Me imagino que el método '.append' se coloca en el lugar equivocado. Los LI resultantes se agrupan todos juntos. ¿Cómo creo un bucle (u otra forma también está bien) que construirá el UL con los LI del submenú correctamente anidados? Intenté usar otras publicaciones similares para resolver mi problema, pero parece que no puedo tener sentido con mis datos y mi código. Un poco de cerebro de esto: he probado algunos métodos para crear esta lista dinámica y hasta ahora ninguno ha tenido éxito. Cualquier ayuda sería apreciada :
os datos de @My JSON están anidados en 3 niveles de profundidad. Necesito crear un menú con submenús a partir de él ...
Los datos
var menu =
[
{
title: "Best Known For",
menuCaption: "Best Known For Caption",
url: "/best-known-for",
menu: [
{
title: "Acting",
menuCaption: "Acting",
url: "",
menu: [
{
title: "Stage",
url: "/"
},
{
title: "Screen",
url: "/"
},
{
title: "Acting Three",
url: "/"
},
{
title: "Acting Four",
url: "/"
},
{
title: "Acting Five",
url: "/"
},
{
title: "Acting Six",
url: "/"
}
]
},
{
title: "S,inging",
menuCaption: "Singing",
url: "",
menu: [
{
title: "Jazz",
url: "/"
},
{
title: "Pop",
url: "/"
},
{
title: "Rock",
url: "/"
},
{
title: "Latin",
url: "/"
},
{
title: "Singing Five",
url: "/"
},
{
title: "Singing Six",
url: "/"
}
]
},
{
title: "Directing",
menuCaption: "Directing",
url: "",
menu: [
{
title: "Television",
url: "/"
},
{
title: "Stage",
url: "/"
},
{
title: "Screen",
url: "/"
},
{
title: "Award Winners",
url: "/"
},
{
title: "Directing Five",
url: "/"
},
{
title: "Directing Six",
url: "/"
}
]
},
{
title: "Politics",
menuCaption: "Politics",
url: "",
menu: [
{
title: "Presidents",
url: "/"
},
{
title: "Senators",
url: "/"
},
{
title: "House Of Representatives",
url: "/"
},
{
title: "Governors",
url: "/"
},
{
title: "Mayors",
url: "/"
},
{
title: "Other Notables in Government",
url: "/"
}
]
}
]
},{
title: "Life Events",
menuCaption: "Choose a life Event",
url: "/life-events",
menu: [
{
title: "Arrested",
menuCaption: "Arrested",
url: "",
menu: [
{
title: "Drug Possession",
url: "/"
},
{
title: "Prostitution",
url: "/"
},
{
title: "Tax Evasion",
url: "/"
},
{
title: "Murder",
url: "/"
},
{
title: "Rape",
url: "/"
},
{
title: "Grand Theft",
url: "/"
}
]
},
{
title: "Awards",
menuCaption: "Awards",
url: "",
menu: [
{
title: "Academy Award",
url: "/"
},
{
title: "Tony",
url: "/"
},
{
title: "People's Choice",
url: "/"
},
{
title: "Emmy",
url: "/"
},
{
title: "Sag Award",
url: "/"
},
{
title: "Lifetime Achievement",
url: "/"
}
]
},
{
title: "Charity Work",
menuCaption: "Charity Work",
url: "",
menu: [
{
title: "HIV/Aids",
url: "/"
},
{
title: "Cerebral Palsy",
url: "/"
},
{
title: "Spinal Cord Injury",
url: "/"
},
{
title: "Breast Cancer",
url: "/"
},
{
title: "Homelessness",
url: "/"
},
{
title: "Orphans",
url: "/"
}
]
},
{
title: "Crime Victim",
menuCaption: "Crime Victim",
url: "",
menu: [
{
title: "Rape",
url: "/"
},
{
title: "Murder",
url: "/"
},
{
title: "Home Invasion",
url: "/"
},
{
title: "Assault",
url: "/"
},
{
title: "Identity Fraud",
url: "/"
},
{
title: "Some Other Crime",
url: "/"
}
]
},
{
title: "Death",
menuCaption: "Death",
url: "",
menu: [
{
title: "Suicide",
url: "/"
},
{
title: "Homocide",
url: "/"
},
{
title: "Cancer",
url: "/"
},
{
title: "Accident",
url: "/"
},
{
title: "Heart Attack",
url: "/"
},
{
title: "Stroke",
url: "/"
}
]
},
{
title: "Disappeared",
menuCaption: "Disappeared",
url: "",
menu: [
{
title: "Disappeared One",
url: "/"
},
{
title: "Disappeared Two",
url: "/"
},
{
title: "Disappeared Three",
url: "/"
},
{
title: "Disappeared Four",
url: "/"
},
{
title: "Disappeared Five",
url: "/"
},
{
title: "Disappeared Six",
url: "/"
}
]
},
{
title: "Discovery",
menuCaption: "Discovery",
url: "",
menu: [
{
title: "New Land",
url: "/"
},
{
title: "New Medicine",
url: "/"
},
{
title: "New Species",
url: "/"
},
{
title: "New Planet",
url: "/"
},
{
title: "New Star",
url: "/"
},
{
title: "New Something Else",
url: "/"
}
]
},
{
title: "Divorced",
menuCaption: "Divorced",
url: "",
menu: [
{
title: "Divorced One",
url: "/"
},
{
title: "Divorced Two",
url: "/"
},
{
title: "Divorced Three",
url: "/"
},
{
title: "Divorced Four",
url: "/"
},
{
title: "Divorced Five",
url: "/"
},
{
title: "Divorced Six",
url: "/"
}
]
},
{
title: "Fame",
menuCaption: "Fame",
url: "",
menu: [
{
title: "Singing",
url: "/"
},
{
title: "Dancing",
url: "/"
},
{
title: "Acting",
url: "/"
},
{
title: "Politics",
url: "/"
},
{
title: "Activist",
url: "/"
},
{
title: "Infamous",
url: "/"
}
]
},
{
title: "Heroic Act",
menuCaption: "Heroic Act",
url: "",
menu: [
{
title: "Heroic Act One",
url: "/"
},
{
title: "Heroic Act Two",
url: "/"
},
{
title: "Heroic Act Three",
url: "/"
},
{
title: "Heroic Act Four",
url: "/"
},
{
title: "Heroic Act Five",
url: "/"
},
{
title: "Heroic Act Six",
url: "/"
}
]
},
{
title: "Illness",
menuCaption: "Illness",
url: "",
menu: [
{
title: "Cancer",
url: "/"
},
{
title: "HIV/Aids",
url: "/"
},
{
title: "Schizophrenia",
url: "/"
},
{
title: "OCD",
url: "/"
},
{
title: "Anorexia/Bulimia",
url: "/"
},
{
title: "Multiple Sclerosis",
url: "/"
}
]
},
{
title: "Incarcerated",
menuCaption: "Incarcerated",
url: "",
menu: [
{
title: "Incarcerated One",
url: "/"
},
{
title: "Incarcerated Two",
url: "/"
},
{
title: "Incarcerated Three",
url: "/"
},
{
title: "Incarcerated Four",
url: "/"
},
{
title: "Incarcerated Five",
url: "/"
},
{
title: "Incarcerated Six",
url: "/"
}
]
},
{
title: "Killed",
menuCaption: "Killed",
url: "",
menu: [
{
title: "Shot",
url: "/"
},
{
title: "Stabbed",
url: "/"
},
{
title: "Beaten",
url: "/"
},
{
title: "Suicide",
url: "/"
},
{
title: "Strangled",
url: "/"
},
{
title: "Accident",
url: "/"
}
]
},
{
title: "Kidnapped",
menuCaption: "Kidnapped",
url: "",
menu: [
{
title: "Kidnapped One",
url: "/"
},
{
title: "Kidnapped Two",
url: "/"
},
{
title: "Kidnapped Three",
url: "/"
},
{
title: "Kidnapped Four",
url: "/"
},
{
title: "Kidnapped Five",
url: "/"
},
{
title: "Kidnapped Six",
url: "/"
}
]
},
{
title: "Military Service",
menuCaption: "Military Service",
url: "",
menu: [
{
title: "Army",
url: "/"
},
{
title: "Navy",
url: "/"
},
{
title: "Air Force",
url: "/"
},
{
title: "Marines",
url: "/"
},
{
title: "National Guard",
url: "/"
},
{
title: "Coast Guard",
url: "/"
}
]
},
{
title: "Parenthood",
menuCaption: "Parenthood",
url: "",
menu: [
{
title: "Adoption",
url: "/"
},
{
title: "Surrogacy",
url: "/"
},
{
title: "Multiples/Twins",
url: "/"
},
{
title: "Mothers",
url: "/"
},
{
title: "Fathers",
url: "/"
},
{
title: "Odd Baby Names",
url: "/"
}
]
},
{
title: "Product Launch",
menuCaption: "Product Launch",
url: "",
menu: [
{
title: "Fashion",
url: "/"
},
{
title: "Food",
url: "/"
},
{
title: "Technology",
url: "/"
},
{
title: "Automotive",
url: "/"
},
{
title: "Architecture",
url: "/"
},
{
title: "Product Launch Six",
url: "/"
}
]
},
{
title: "Scandal",
menuCaption: "Scandal",
url: "",
menu: [
{
title: "Sex Tape",
url: "/"
},
{
title: "Domestic Violence",
url: "/"
},
{
title: "Fraud",
url: "/"
},
{
title: "Drug Abuse",
url: "/"
},
{
title: "Adultery",
url: "/"
},
{
title: "Arrested",
url: "/"
}
]
},
{
title: "Wealth",
menuCaption: "Wealth",
url: "",
menu: [
{
title: "Top 10 List",
url: "/"
},
{
title: "Richest Women",
url: "/"
},
{
title: "Richest Men",
url: "/"
},
{
title: "Billionaires",
url: "/"
},
{
title: "Self Made",
url: "/"
},
{
title: "Lottery Winners",
url: "/"
}
]
},
{
title: "World Record",
menuCaption: "World Record",
url: "",
menu: [
{
title: "Tallest",
url: "/"
},
{
title: "Shortest",
url: "/"
},
{
title: "Oldest",
url: "/"
},
{
title: "Fastest",
url: "/"
},
{
title: "World Record Five",
url: "/"
},
{
title: "World Record Six",
url: "/"
}
]
}
]
},
{
title: "Date",
menuCaption: "Date",
url: "/date",
menu: []
},
{
title: "Industry",
menuCaption: "Industry",
url: "/industry",
menu: []
},
{
title: "Nationality",
menuCaption: "Nationality",
url: "/nationality",
menu: []
}
];
Construyo el bucle para acceder a todos los datos de menú anidados:
var mainMenu = $("#test ul.mainMenu");
var subMenuL1 = $("#test ul.mainMenu ul.submenuLevel1");
var subMenuL2 = $("#test ul.mainMenu ul.submenuLevel1 ul.submenuLevel2");
var i, j, k, navItem, navItemLevel1, navItemLevel2;
for(var i = 0; i < menu.length; i++){
var navItem = menu[i];
mainMenu.append('<li class="main"><a href="' + navItem.url + '">' + navItem.title +' </a></li>');
for(var j = 0; j < menu[i].menu.length; j++){
var navItemLevel1 = navItem.menu[j];
subMenuL1.append('<li class="level1"><a href="' + navItemLevel1.url + '">' + navItemLevel1.title +' </a></li>');
for(var k = 0; k < menu[i].menu[j].menu.length; k++){
var navItemLevel2 = navItemLevel1.menu[k];
subMenuL2.append('<li class="level2"><a href="' + navItemLevel2.url + '">' + navItemLevel2.title +' </a></li>');
}
}
};
El contenedor HTML:
<div id="test">
<ul class="mainMenu">
<li>
<ul class="submenuLevel1">
<li>
<ul class="submenuLevel2">
<li></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>