HTML5 Template population w/ JSON object example

html5-template.html

<!-- Our template (hidden) that holds our variables as defined by ${var} -->
<li class="span4 myData" id=${id} style="hidden">
  <div class="thumbnail">
    <a class="gallery-img" href="${href}">
      <img alt="${img_description}" src="${img_path}">
    </a>
    <h3 class="gallery-title">
      <a href="${href}">{title}</a>
    </h3>
    <p>${description}</p>
    <ul class="gallery-meta">
      <li><a href="${href}?date=${date}">${date}</a></li>
      <li><a href="${href}?language=${language}">${language}</a></li>
      <li><a href="${href}?author=${author}">${author}</a></li>
    </ul>
    <div class="clearfix"></div>
  </div>
</li>

Javascript-to-populate-template.js

/* this example requires this handy template plugin: http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js */

/* Query server for object */
$.getJSON('path/to/facet?search=param', function(result){

  /* Loop over object populating DIV values with JSON object values */
  $.each(result, function(key, value){

    /* Define the DIV that will be used as our HTML5 template (defined by class .myData) */
    $.template(value.id, $('.myData'));

    /* Populate the DIV with the JSON object values */
    $.tmpl(value.id, value).appendTo('.facet-gallery').show();
  });
});

JSON-data.json

{
  "id": 1,
  "callID": "N6494 .M35",
  "author": "Scott, Michael",
  "title": "Arte correo",
  "date": "1981",
  "description": "At head of cover: ENAP, UNAM.",
  "language": [
    "Spanish",
    "Portuguese"
  ],
  "genre": [
    "graphics",
    "poetics"
  ],
  "images": [
    {
      "path": "path/to/image/1",
      "description": "description for image 1",
    },
    {
      "path": "path/to/image/2",
      "description": "description for image 2",
    }
  ],
  "href": "collection/details/1"
},
{
  "id": 2,
  "callID": "N7433.4 .G666",
  "author": "Goulart, Claudio,",
  "title": "À la chasse de moi même",
  "date": "1976",
  "description": "French title roughly translates to 'to hunt myself'.  20 (including cover) unbound pages.  Each features a figure accompanied by a roman numeral.  Last page, XIX, is mirrored.",
  "language": [
    "French"
  ],
  "genre": [
    "graphics"
  ],
  "images": [
    {
      "path": "path/to/image/3",
      "description": "description for image 3",
    },
    {
      "path": "path/to/image/4",
      "description": "description for image 4",
    }
  ],
  "href": "collection/details/2"
}