Create nested UL lists from data object
|
7:48 PM |
No comments |
Create nested UL lists from data object
I'm trying to create a nested UL from JSON. I am able to loop through and grab the data from the object, but I am having trouble building the nested UL. I figure the '.append' method is placed in the wrong spot. The resulting LIs are all grouped together. How do I create a loop (or another way is fine too) that will build the UL with the submenu LIs properly nested? I've tried using other similar posts to solve my issue, but I can't seem to make it make sense with my data and code. A little braindead from this - I've tried a few methods to create this dynamic list and so far none has been successful. Any help would be appreciated :)
My JSON data is nested 3 levels deep. I need to create a menu with submenus from it....
The data:
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: "Singing", 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: [] } ]; I build the loop to access all of the nested menu data:
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('' + navItem.title +' '); for(var j = 0; j < menu[i].menu.length; j++){ var navItemLevel1 = navItem.menu[j]; subMenuL1.append('' + navItemLevel1.title +' '); for(var k = 0; k < menu[i].menu[j].menu.length; k++){ var navItemLevel2 = navItemLevel1.menu[k]; subMenuL2.append('' + navItemLevel2.title +' '); } } }; The HTML container:
-
Answer by Neal for Create nested UL lists from data object
Here is a solution:
var mainMenu = $("#test ul.mainMenu"); var i, j, k, navItem, navItemLevel1, navItemLevel2; for(var i = 0; i < menu.length; i++){ var navItem = menu[i]; var new_li = $('' + navItem.title +' '); mainMenu.append(new_li); for(var j = 0; j < menu[i].menu.length; j++){ var new_li_ul = $('ul.submenuLevel1', new_li); if(new_li_ul.length <= 0){ new_li_ul = $(''); new_li.append(new_li_ul); } var navItemLevel1 = navItem.menu[j]; var new_li_li = $('' + navItemLevel1.title +' '); new_li_ul.append(new_li_li); for(var k = 0; k < menu[i].menu[j].menu.length; k++){ var new_li_ul_ul = $('ul.submenuLevel2', new_li_li); if(new_li_ul_ul.length <= 0){ new_li_ul_ul = $(''); new_li_li.append(new_li_ul_ul); } var navItemLevel2 = navItemLevel1.menu[k]; new_li_ul_ul.append('' + navItemLevel2.title +' '); } } }; Here is a fiddle: http://jsfiddle.net/maniator/6JnuG/3/
Answer by Hogan for Create nested UL lists from data object
Most of what you make is dynamic so start with something like this
Then in your code use the things you just made and add to them. Something like this:
for(var i = 0; i < menu.length; i++){ var navItem = menu[i]; subMenuL1 = mainMenu.append('' + navItem.title +' '); for(var j = 0; j < menu[i].menu.length; j++){ var navItemLevel1 = navItem.menu[j]; subMenuL2 = subMenuL1.append('' + navItemLevel1.title +' '); for(var k = 0; k < menu[i].menu[j].menu.length; k++){ var navItemLevel2 = navItemLevel1.menu[k]; subMenuL2.append('' + navItemLevel2.title +' '); } } }; Note: I did not test at all... just looked at the example code and made a few changes to get you in the right direction.
Answer by Raynos for Create nested UL lists from data object
Here's a nicer solution:
var Menu = function(data) { this.data = data; }; Menu.prototype.render = function(root) { var ul = $("
"); var li = $(""); li.append($("", { href: this.data.url, text: this.data.title })).appendTo(ul); ul.appendTo(root); if (this.data.menu) { Menu.renderMenus(this.data.menu, $("").appendTo(ul)); } }; Menu.renderMenus = function(menus, root) { $.each(menus, function(key, val) { var m = new Menu(val); m.render(root); }); } Menu.renderMenus(menu, $("#container")); Answer by BnW for Create nested UL lists from data object
You can use a recursive function for appending submenus.
This is a simple solution for three sublevels or more
function appendMeu(parent, menu, level) { for(var i = 0;i < menu.length; i ++) { var submenu = parent.append('' + menu[i].title + ' ') .find("li:last"); if(menu[i].menu != undefined && menu[i].menu.length > 0) { submenu = submenu.append('').find("ul"); appendMeu(submenu, menu[i].menu, level + 1); } } } $(function() { appendMeu($(".mainMenu"), menu, 0); }); Answer by ShaneBlake for Create nested UL lists from data object
Here's how to do this with the jQuery template plugin I mentioned
This would be in your script tag:
$(function () { $('#t_menu').tmpl(menu).appendTo('#test'); }); And this in your html :
Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72
0 comments:
Post a Comment