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

Question

我一直在努力研究如何加载一大块JSON数据，这些数据的排序方式如主要类别 - ＆gt;子类别 - ＆gt;将（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个类别正常 - 由allan morse工作，在melling之下的住宅，在melling之下的商业等等。

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