jquery - 将 Json 数据加载到一系列列表和类别中

Question

我一直在尝试研究如何将一大块 JSON 数据加载到一系列下拉列表中，这些数据的顺序如下：主类别 -> 子类别 -> 链接（a href="url"）等：

到目前为止，我有这个：

$(function() {
            var data = [
                {
                    name: "Work By Allan Morse",
                    data: [
                        {
                            name: "Residential Work",
                            data: [
                                    { name: "Studio", url: "http://www.flickr.com/photos/91118467@N07/sets/72157632257518934/" },
                                    { name: "Yates House", url: "http://www.flickr.com/photos/91118467@N07/sets/72157632257525780/" },
                                ]
                        },
                        {
                            name: "Sacred Architecture",
                            data: [
                                    { name: "Meditation Room", url: "http://www.flickr.com/photos/91118467@N07/sets/72157632257533152/" },
                                ]
                        }
                    ]
                },
                {
                    name: "Residential under Melling Morse Architects",
                    data: [
                        {
                            name: "Affordable Housing",
                            data: [
                                    { name: "Shelter Housing", url: "http://www.flickr.com/photos/91118467@N07/sets/72157632257505196/" },
                                    { name: "Matariki", url: "http://www.flickr.com/photos/91118467@N07/sets/72157632257493734/" },
                                ]
                        },
                        {
                            name: "Bespoke Houses",
                            data: [
                                    { name: "Samurai House", url: "http://www.flickr.com/photos/91118467@N07/sets/72157632257486504/" },
                                    { name: "Split Box", url: "http://www.flickr.com/photos/91118467@N07/sets/72157632257471554/" },
                                ]
                        }
                    ]
                },
                {
                    name: "Small Commerical under Melling Morse Architects",
                    data: [
                        { name: "Shop and Studio", url: "http://www.flickr.com/photos/91118467@N07/sets/72157632253307953/" },
                        { name: "Church Hall", url: "http://www.flickr.com/photos/91118467@N07/sets/72157632253379065/" },
                        { name: "Bed and Breakfast", url: "http://www.flickr.com/photos/91118467@N07/sets/72157632253732335/" }
                    ]
                }
            ]

        /* Start of the thing that builds the navigation, not sure how to do the next levels */
        $.each(data, function(i, option) {
            category = option.name;
            $('#project_nav').append($('<li class="project_subnav_container"><div class="category">'+ category +'</div><ul class="project_subnav"><div class="sub_category">Residential Work</div><li><a href="">Example Project</a></li><li><a href="">Example Project 2</a></li><div class="sub_category">Sacred Architecture</div><li><a href="">Example Project</a></li></ul></li> '));
        }); 

        })

我很难理解如何访问第一组名称之外的任何内容。到目前为止，我的前 3 个类别做得很好——艾伦·莫尔斯的作品，梅林下的住宅，梅林下的商业等。

Answer 1

正如我理解的那样，您需要在其中的每个循环中再增加 2 个。像这样的东西：

    $.each(data, function(i, option) {
        category = option.name;
        var $navigation = $('<li class="project_subnav_container"><div class="category">'+ category +'</div></li> ').appendTo($('#project_nav'));
        $.each(option.data, function(i, suboption) {
            var subcategory = suboption.name;
            var $subCategory = $("<ul class='project_subnav'><div class='sub_category'>" + subcategory + "</div></ul>").appendTo($navigation);
            $.each(suboption.data, function (i, item) {
                  var itemName = item.name;
                  $("<li><a href='" + item.url + "'>" + itemName + "</a></li>").appendTo($subCategory);
            });
        });
    });