Easy script to map json data to pure html tree.

Think of keys in JSON as jquery selectors, traversing down the tree sums them making selector for each data to render.

Simple example
html:
    <div class="users"><a class="name" href="#"></a> Age of: <span class="age"></span></div>

data:
  var users = [
    {'.name':'Ben','.name@href':'#/a','.age':24},
    {'.name':'Bob','.name@href':'#/b','.age':25},
    {'.name':'Brad','.name@href':'#/c','.age':26}
  ]

render:
  $('.users').render(users);

output:
  <div class="_pt_key4_0" class="users">
    <a href="#/a" class="name">Ben</a> Age of: <span class="age">24</span>
  </div><div class="_pt_key4_1" class="users">
    <a href="#/b" class="name">Bob</a> Age of: <span class="age">25</span>
  </div><div class="_pt_key4_2" class="users">
    <a href="#/c" class="name">Brad</a> Age of: <span class="age">26</span>
  </div>


Nested example
html:
  <div>
    <select id="opts">
      <optgroup label="">
        <option value=""></option>
      </optgroup>
    </select>
  <div>

data:
var options_selectors = [
  {'@label':'First','option':[
    {'':'A','@value':'1'},
    {'':'B','@value':'2'}
  ]},
  {'@label':'Second','option':[
    {'':'C','@value':'3'},
    {'':'D','@value':'4'}
  ]}
]

render:
  $('#options>optgroup').render(options_selectors);


data with mapping:
var options = [
  {group:'Third',list:[{name:'E',value:5},{name:'F',value:6}]},
  {group:'Forth',list:[{name:'G',value:7},{name:'H',value:8}]}
]
var options_map = {group:'@label',list:['option',{name:'',value:'@value'}]}

render:
  $('#options>optgroup').render(options,{map:options_map});


output (for selectors and mapping):
  <div id="options">
    <select id="server_opts">
      <optgroup class="_pt_key13_0" label="Third">
        <option class="_pt_key14_0" value="5">E</option><option class="_pt_key14_1" value="6">F</option>
      </optgroup><optgroup class="_pt_key13_1" label="Forth">
        <option class="_pt_key15_0" value="7">G</option><option class="_pt_key15_1" value="8">H</option>
      </optgroup>
    </select>
  </div>

Using template to render content:
In header section define html script (keep unique ids):
    <script id="entry_show_template" defer type="text/html">
      <div class="entry">
        Age: <span class="age"></span> <a class="name" href="#"></a>
      </div>
    </script>

In document body place the same as root of template:
    <div class="entry"></div>

Finally render users from first example:
    $('.entry').render(users,{template:'entry_show_template'});

Using templates allows to call render code many times on the same selector, for only once filling content no need of templates is needed.

Some additional information can be found on author page: http://niczsoft.com/tag/pure/