Create nested UL lists from data object

Question

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('<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>');
                }
        }
};

The HTML container:

<div id="test">
    <ul class="mainMenu">
        <li>
            <ul class="submenuLevel1">
                <li>
                    <ul class="submenuLevel2">
                        <li></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

For your own sanity, I'd suggest taking a look at jQuery templating. http://api.jquery.com/tmpl/ — ShaneBlake, May 17 '11 at 17:56
I'm not going to sift through all this code. Can you please get to the point? Say what the structure of your JSON data is and exactly what you want to do with it, please. — Ry-, May 17 '11 at 18:01
seems to be working here: http://jsfiddle.net/maniator/6JnuG/ — Naftali, May 17 '11 at 18:10

Raynos · Answer 1 · 2011-05-17T18:25:45.863

7

Here's a nicer solution:

var Menu = function(data) {
    this.data = data; 
};

Menu.prototype.render = function(root) {
    var ul = $("<ul></ul>");
    var li = $("<li></li>");
    li.append($("<a></a>", {
        href: this.data.url,
        text: this.data.title
    })).appendTo(ul);
    ul.appendTo(root);
    if (this.data.menu) {
        Menu.renderMenus(this.data.menu, $("<li></li>").appendTo(ul));
    }
};

Menu.renderMenus = function(menus, root) {
    $.each(menus, function(key, val) {
        var m = new Menu(val);
        m.render(root);
    });
}

Menu.renderMenus(menu, $("#container"));

Live example

edited May 17 '11 at 18:25

answered May 17 '11 at 18:19

Raynos

166,823
56
351
396

This is really nice. I like this - it works, I have to make a few tweaks to eliminate some extra nodes, but I get it. I'll def keep this solution in mind :) Thank you for answering, Raynos :) – GirlGoneMad May 17 '11 at 19:04
@GirlGoneMad I recommend that for sanity you wrap your data and your rendering algorithm in an object like this. Also recursion is useful. – Raynos May 17 '11 at 19:07
why method render is prototype... but renderMenus isn't, could you explain please ? and what benefit do we get by adding prototype to render method ? thanks – Mathematics Mar 06 '17 at 10:06

score 3 · Answer 2 · edited May 17 '11 at 18:24

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('<li>' + menu[i].title + '</li>')
            .find("li:last");

        if(menu[i].menu != undefined && menu[i].menu.length > 0) {
            submenu = submenu.append('<ul class="submenuLevel' + (level + 1) + '"></ul>').find("ul");
            appendMeu(submenu, menu[i].menu, level + 1);
        }
    }
}

$(function() {
    appendMeu($(".mainMenu"), menu, 0);
});

score 2 · Accepted Answer · answered May 17 '11 at 18:17

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 = $('<li class="main"><a href="' + navItem.url + '">' + navItem.title +' </a></li>');
    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  = $('<ul class="submenuLevel1"></ul>');
                new_li.append(new_li_ul);
            } 
            var navItemLevel1 = navItem.menu[j];
            var new_li_li = $('<li class="level1"><a href="' + navItemLevel1.url + '">' + navItemLevel1.title +' </a></li>');
            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 = $('<ul class="submenuLevel2"></ul>');
                        new_li_li.append(new_li_ul_ul);
                    } 
                    var navItemLevel2 = navItemLevel1.menu[k];
                    new_li_ul_ul.append('<li class="level2"><a href="' + navItemLevel2.url + '">' + navItemLevel2.title +' </a></li>');
                }
        }
};

Here is a fiddle: http://jsfiddle.net/maniator/6JnuG/3/

This worked really well. THANKS!! This is what I was trying to do! You are awesome, Neal! — GirlGoneMad, May 17 '11 at 19:02
@Raynos -- sorry, your solution is nice but it is not of a different O(). Any menu item that is of length 0 does not get executed. — Hogan, May 17 '11 at 19:31

score 1 · Answer 4 · answered May 17 '11 at 18:17

Most of what you make is dynamic so start with something like this

<div id="test">
    <ul class="mainMenu">
    </ul>
</div>

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('<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];
            subMenuL2 = 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>');
                }
        }
};

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.

@GirlGoneMad -- Thanks. Mine is the same as the accepted solution, just 20 seconds later... — Hogan, May 17 '11 at 19:31

score 1 · Answer 5 · answered May 17 '11 at 18:36

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 :

<div id="test">  </div> 

<script id="t_menu" type="text/html">
   <ul class="mainMenu">
   {{each menu}} 
        <li class="main">
            <a href="${url}">${title}</a>            
            <ul class="submenuLevel1">
            {{each menu}}
                <li class="level1">                    
                    <a href="${url}">${title}</a>            
                    <ul class="submenuLevel2">
                    {{each menu}}
                        <li class="level2">
                            <a href="${url}">${title}</a>
                        </li>
                    {{/each}}
                    </ul>                
                </li>
            {{/each}}
            </ul>        
        </li>    
    {{/each}}
    </ul>
</script>

Thanks Shane Blake - I was trying to figure out how to access the nested data with the .tmpl plugin. I'd actually never used this or heard of it. I'll keep this one top of mind for future use :) — GirlGoneMad, May 17 '11 at 19:06
Sorry ShaneBlake, I just saw this. Forgive me, I'm a new user and still learning the protocol. — GirlGoneMad, May 18 '11 at 18:22

Create nested UL lists from data object

5 Answers5

Linked