Loading Json data into a series of lists and categorys

Question

I've been trying to work out how to load a chunk of JSON data which is ordered like, Main category -> sub category -> link (a href="url") etc, into a series of dropdown lists like so:

Image of layout example

So far I have this:

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

        })

I'm having trouble getting my head around how to access anything beyond the first set of names. So far I have the first 3 categorys coming up fine - work by allan morse, residential under melling, comercial under melling etc.

You should understand concept of recursion, since it's very important thing to learn for beginner programmer. Please look [Printing nested JSON without using variable names](http://stackoverflow.com/questions/4110004/printing-nested-json-without-using-variable-names) question, it can be helpful. — andrewpey, Dec 17 '12 at 13:01

score 1 · Answer 1 · answered Dec 17 '12 at 13:06

As I understand you right you need 2 more each loops inside existed one. Something like this:

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

Loading Json data into a series of lists and categorys

1 Answers1