Json To Nested Unordered List

I am trying to convert a JSON into an unordered list in jQuery.This is my JSON data. var myJSON = '{name:\'Director\',children:[name:\'Exe Director1\',name:\'Exe Director2\',name:\

Solution 1:

This is exactly what you need:

Use the jQuery template API. This was once part of jQuery but is currently only available as plugin. However, I think jQuery will adopt this or a similar technique again soon.

http://api.jquery.com/category/plugins/templates/

Its super easy to use:

$.tmpl("template", jsonObject)

Here a small basic template example:

$.tmpl(
    "<li><b>${Id}</b>${Name}</li>", 
    [{Id:1, Name:"Werner"}, {Id:2, Name:"Klaus"}]
);

This will result in the following jQuery HTML element that can be appended to anywhere:

1 Werner

2 Klaus

For your complex data, you can also iterate JSON sub objects using the "{{each}}" template notation. Here the code for your data and template:

var data = {name:"Director",children:[{name:"Exe Director1"},{name:"Exe Director2"},{name:"Exe Director3", children:[{name:"Sub Director3_1"},{name:"Sub Director3_2"},{name:"Sub Director3_3",children:[{name:"Cameraman3_3_1"},{name:"Cameraman3_3_2"}]}]}]};

var template = '\
    <ul>\
        <li>${name}\
            <ul>\
                {{each(childindex, child) children}}\
                    <li>${child.name}\
                        <ul>\
                            {{each(child2index, child2) child.children}}\
                                <li>${child2.name}</li>\
                            {{/each}}\
                        </ul>\
                    </li>\
                {{/each}}\
            </ul>\
        </li>\
    </ul>\
';

$('body').empty().append($.tmpl(template, data));

Browsers Result:

• Director
  • Exe Director1
  • Exe Director2
  • Exe Director3
    • Sub Director3_1
    • Sub Director3_2
    • Sub Director3_3
    • ...

This can be tweaked to support full recursion by including nested templates... but im a lazy guy and the rest is todo for you.

cheers, will

Solution 2:

You can use recursive function as follows. Everytime the function is called it returns a "UL", along with its child "LI".

functiongenerateMenu(data) {

    var ul = $("<ul>");

        $(data).each(function (i, dir) {
             var li = $('<li>' + dir.name + '</li>');
             ul.append(li);

            if (dir.children != null && dir.children.length > 0) {
                li.append(generateMenu(dir.children));
            }

        });

    return ul;
};

Use it as :

$("#some-div").append(generateMenu(myJsonData));

The Json is,

var myJsonData = JSON.parse('{"name": "Director","children": [{ "name": "Exe Director1" },{ "name": "Exe Director2" },{"name": "Exe Director3","children": [{ "name": "Sub Director1" },{ "name": "Sub Director2" },{"name": "Sub Director3","children": [{ "name": "Cameraman 1" },{ "name": "Cameraman 2" }]}]}]}');