Loop to display hierarchical data

Question

I am creating an array out of essentially hierachical data, for example as below:

[
    {id: 1, title: 'hello', parent: 0, children: [
        {id: 3, title: 'hello', parent: 1, children: [
            {id: 4, title: 'hello', parent: 3, children: [
                {id: 5, title: 'hello', parent: 4},
                {id: 6, title: 'hello', parent: 4}
            ]},
            {id: 7, title: 'hello', parent: 3}
        ]}
    ]},
    {id: 2, title: 'hello', parent: 0, children: [
        {id: 8, title: 'hello', parent: 2}
    ]}
]

I am looking to loop through the array, but can't get my head around how to recursively loop down to create an unordered list where each child level is indented. Trying to do this in JavaScript, but need a push in the right direction for the construction of the loop to drill down until there are no more children, and then back up to the top array.

Any help would be appreciated.

Answer 1

I answered a question about this before

Here is demo for it: http://jsfiddle.net/zn2C7/7/

var list = $("<ul>");
function populatedata() {
     $.each(data.FolderList, function (i, folder) {                
         if (folder.ParentFolderID == -1) {
            var item = $("<li>").html(folder.FolderName);

            list.append(item);
            var children = $('<ul>');
            item.append(children);
            checkChild(folder.FolderID, children);                    
        }

    });
    $('body').append(list);
}

function checkChild(parentid, parent) {
    $.each(data.FolderList, function (i, folder) {
        if (folder.ParentFolderID == parentid) {
            var item = $("<li>").html(folder.FolderName);                    
            var children = $('<ul>');
            parent.append(item);
            item.append(children);
            checkChild(folder.FolderID, children);                    
        }
        else {
            return ;
        }
    });
}

It was possible to build it using html variable, like you tried to do that, but it is much simpler to use DOM manipulation functions of jQuery ($('<ul>') and $('<li>') - create new element, .append() - append element to some other element)

  function checkChild(parentid) {
        $.each(data.FolderList, function (i, folder) {

            if (folder.ParentFolderID == parentid) {
                html += '<li><ul>' + folder.FolderName;
                checkChild(folder.FolderID);
                html+=</ul></li>
                return html;
            }
            else {
                return ;
            }
        });
    }

Also, please note that in code above you are doing return html; from each function callback. Not sure what you wanted to get exactly, but in .each it may work like break in regular loop (if you will return false):

We can stop the loop from within the callback function by returning false.

That is from jquery api page.

Also, for such tasks I prefer to use debugger. At this moment there are a lot of powerful tools for HTML/CSS/JS debugging in browser. Just press F12 in Chrome, IE or FF (for the last one you may need to install Firebug extension) and you will get a lot of helpful features along with simple JS debugging.