one json-request to multiple DOM-destinations - how?

I'开发者_开发问答m having a "list" that I want to populate with a background-json request. Items have different headings and traffic should be minimal (mobile webapp), DOM-structure something like:

<div id="deckStart">
  <div id="cardContacts">
    <h2>Contacts</h2>
    <div id="cardContactsContent">nothing here until JSON</div>
  </div>
  <div id="cardTodo">
    <h2>To do</h2>
    <div id="cardTodoContent">nothing here until JSON</div>
  ....

//EDIT

OK, this works:

x$(window).on('load', function() {
  x$(window).xhr('json.txt', {
    async: true,
    callback: function() {
      var t = eval('(' + this.responseText + ')');
      for(var key in t) {
        var obj = t[key];
        x$('#' + key).html('inner',obj);
      }
    }
 });

but why doesn't JSON.parse work on chrome? Eval seems dirty..

//end edit

What would be the most efficient way to populate the respective content-divs with one single JSON-request?

• Temp load into JS-array?
• Temp load into hidden DOM-part?
• Some regexp-trick or other I cannot think of?

The network stability / speed is unreliable.

regards,

Can you get jQuery on there? You could do it in a heartbeat with jQuery...