javascript - 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",
          

Answer 1

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