Javascript Load data into region. Pass in selector to load data to, data object. Will loop through data and place all the data into the locations based on the level and class. So you can easily template info

data.json

{
 "person":{ 
   "firstname":"Mike",
   "lastname":"lovely",
  "favs":{
    "animal":"cat",
    "activity":"cycling"
  }
 },
 "comment":"i'm so tired"
}

loadwith.html

<div class="info">
  <div class="person_firstname"></div>
  <div class="person_lastname"></div>
  <div class="comment"></div>
  <div class="person_favs_animal"></div>
  <div class="person_favs_activity"></div>  
</div>

loadwith.js

function loadWith( selector,data,prefix ) {
  var self = this;
  prefix = prefix || "";
  if (typeof data == "object") {
    for (var key in data) {
      console.debug(key,data[key]);
      $(selector).find("."+(prefix?prefix+"_":"")+key).html(data[key]);
      if (typeof data[key] == "object" && !(data[key] instanceof Array)) {
        return self.loadWith(selector, data[key],(prefix?prefix+"_":"")+key);
      }
    }
  } else {
    $(selector).find("."+(prefix?prefix+"_":"")+key).html(data);
  }
};

main.js

// data = data.json evaluated

// this will work based on current code
loadWith(".info",data);


// meta code 

// or loop through a bunch and populate each
var friends = [data,data,data,data];

var i = 0;
for(var person in friends){
  loadWith(".info"+i,person);
  i++;
}