javascript - 从数据对象创建嵌套的 UL 列表

Question

我正在尝试从 JSON 创建一个嵌套的 UL。我能够遍历并从对象中获取数据，但是我在构建嵌套的 UL 时遇到了问题。我认为“.append”方法放在了错误的位置。生成的 LI 全部组合在一起。我如何创建一个循环(或其他方法也可以)来构建 UL 并正确嵌套子菜单 LI？我试过使用其他类似的帖子来解决我的问题，但我似乎无法用我的数据和代码来理解它。这有点脑残 - 我已经尝试了几种方法来创建这个动态列表，但到目前为止都没有成功。任何帮助将不胜感激:)

我的 JSON 数据嵌套了 3 层深。我需要创建一个带有子菜单的菜单....

数据:

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: []
    }




];

我构建循环以访问所有嵌套菜单数据:

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

HTML 容器:

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

Answer 1

这是一个更好的解决方案:

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