Jquery templates - nested JSON (unique key-names)

http://stackoverflow.com/questions/7387303/jquery-templates-nested-json-unique-key-names

by Gary Scott

HTML

<script src="http://knockoutjs.com/downloads/jquery.tmpl.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div  class="container">
    
     <div class="row" id="content"></div>
    
    
</div>
<script id="contentTmpl" type="text/html">
    <div class="col-lg-6">
    <div class = "panel panel-default">

    {{each(i, item) $data}}

    <div class = "panel-heading"> 
        ${i} 
        </div>
        <div class="panel-body">
       <div class = "panel panel-default">
        {{each(j, subItem) item}}
          <div class="panel-heading">${j}</div>
            <div class = "panel-body">

    <dl> 
        {{each(k, subSubItem) subItem}} 
        <dd> 
        ${k} = ${subSubItem} 
        </dd>
            {{/each}}
                </dl>
            </div>
       



    {{/each}}
         </div>     </div>
            {{/each}}
  
</div >
    </div>
</script>

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");