Jquery templates - nested JSON (unique key-names)

by Andrew Pougher

HTML

<script src="http://knockoutjs.com/downloads/jquery.tmpl.min.js"></script>
<div id="content"></div>

<script id="contentTmpl" type="text/html">
    <ul>
    {{each(i, item) $data}}
        <li>${i}</li>
        <ul>
        {{each(j, subItem) item}}
            <li>${j}</li>    
            <ul>
            {{each(k, subSubItem) subItem}}
                <li>${k} = ${subSubItem}</li>
            {{/each}}
            </ul>
        {{/each}}
        </ul>
    {{/each}}
    </ul>
</script>

CSS

ul { margin-left: 20px; }

JavaScript

var data = {
    testA: {
        testA1: {
            testA1A: "blahA1A",
            testA1B: "blahA1B" 
        },
        testA2: {
            testA2A: "blahA2A",
            testA2B: "blahA2B"  
        }
    },
    testB: {
        testB1: {
            testB1A: "blahB1A",
            testB1B: "blahB1B" 
        },
        testB2: {
            testB2A: "blahB2A",
            testB2B: "blahB2B" 
        },
    }
};
    
$("#contentTmpl").tmpl(data).appendTo("#content");