Harsha Venkatram Harsha Venkatram - 6 months ago 41
HTML Question

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:\"Exe Director3\",children:[name:\"Sub Director1\",name:\"Sub Director2\",name:\"Sub Director3\",children:[name:\"Cameraman 1\",name:\"Cameraman 2\"]]]}";


The expected output being

<ul>
<li>Director
<ul>
<li>Exe Director 1</li>
<li>Exe Director 2</li>
<li>Exe Director 3
<ul>
<li>Sub Director 1</li>
<li>Sub Director 2</li>
<li>Sub Director 3
<ul>
<li>Cameraman 1</li>
<li>Cameraman 2</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>


How do I go about with this!

Cheers,

Answer

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