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. api.jquery.com/tmpl — ShaneBlake
– ShaneBlake, Commented May 17, 2011 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-
– Ry- ♦, Commented May 17, 2011 at 18:01

Raynos · Accepted Answer · 2011-05-17 18:25:45Z

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, 2011 at 18:25

answered May 17, 2011 at 18:19

Raynos

170k57 gold badges359 silver badges399 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

GirlGoneMad Over a year ago

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 :)

Raynos Over a year ago

@GirlGoneMad I recommend that for sanity you wrap your data and your rendering algorithm in an object like this. Also recursion is useful.

Mathematics Over a year ago

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

Naftali · Accepted Answer · 2011-05-17 18:24:06Z

3

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

edited May 17, 2011 at 18:24

Naftali

147k41 gold badges247 silver badges304 bronze badges

answered May 17, 2011 at 18:22

BnW

6021 gold badge4 silver badges13 bronze badges

Comments

Naftali · Accepted Answer · 2011-05-17 18:17:04Z

2

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/

answered May 17, 2011 at 18:17

Naftali

147k41 gold badges247 silver badges304 bronze badges

2 Comments

GirlGoneMad Over a year ago

This worked really well. THANKS!! This is what I was trying to do! You are awesome, Neal!

Hogan Over a year ago

@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 · Accepted Answer · 2011-05-17 18:17:41Z

1

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.

answered May 17, 2011 at 18:17

Hogan

70.7k10 gold badges83 silver badges119 bronze badges

1 Comment

Hogan Over a year ago

@GirlGoneMad -- Thanks. Mine is the same as the accepted solution, just 20 seconds later...

ShaneBlake · Accepted Answer · 2011-05-17 18:36:12Z

1

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>

answered May 17, 2011 at 18:36

ShaneBlake

11.1k2 gold badges28 silver badges43 bronze badges

2 Comments

GirlGoneMad Over a year ago

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 Over a year ago

Sorry ShaneBlake, I just saw this. Forgive me, I'm a new user and still learning the protocol.

Collectives™ on Stack Overflow

Create nested UL lists from data object

5 Answers 5

3 Comments

Comments

2 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

2 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related