public
Last active

JavaScript Templating Example to show rendering techniques of JS data in HTML or XML formats.

  • Download Gist
index.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>JSON Transform</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
<script type="text/javascript" src="https://raw.github.com/douglascrockford/JSON-js/master/json2.js"></script>
 
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet"></link>
 
 
<script type="text/template" id="tpl-html">
<div class="well">
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<% _.each( target, function(i) {%>
<tr>
<td><%= i.id %></td>
<td><%= i.lastName %>, <%= i.firstName %></td>
<td><%= i.email %></td>
<td><%= i.phone %></td>
</tr>
<% }); %>
</tbody>
</table>
</div>
</script>
<script type="text/template" id="tpl-xml">
<data>
<% _.each( target, function(i) {%>
<entry>
<id><%= i.id %></id>
<name>
<last><%= i.lastName %></last>
<first><%= i.firstName %></first>
</name>
<contact>
<email><%= i.email %></email>
<phone><%= i.phone %></phone>
</contact>
</entry>
<% }); %>
</data>
</script>
 
<script>
 
var rawData = [
{id:1, firstName:"Homer", lastName:"Simpson", email:"homersimpson@fakeemail.com", phone:"555-123-1234"},
{id:2, firstName:"Bart", lastName:"Simpson", email:"bartsimpson@fakeemail.com", phone:"555-123-2345"},
{id:3, firstName:"Marge", lastName:"Simpson", email:"margesimpson@fakeemail.com", phone:"555-123-3456"},
{id:4, firstName:"Lisa", lastName:"Simpson", email:"lisasimpson@fakeemail.com", phone:"555-123-4567"},
{id:5, firstName:"Maggie", lastName:"Simpson", email:"maggiesimpson@fakeemail.com", phone:"555-123-5678"} ];
 
function showJSONString() {
$("#output").html( "<pre>" + JSON.stringify(rawData) + "</pre>") ;
 
$("a").removeClass("btn-warning");
$("#json").addClass("btn-warning");
}
 
function generateHTML() {
var data = { target:rawData };
var template = _.template( $("#tpl-html").text() );
$("#output").html( template(data) );
 
$("a").removeClass("btn-warning");
$("#html").addClass("btn-warning");
}
 
function generateXML() {
var data = { target:rawData };
var template = _.template( $("#tpl-xml").text() );
var xml = template(data);
$("#output").html( "<pre>" + _.escape( xml ) + "</pre>" );
 
$("a").removeClass("btn-warning");
$("#xml").addClass("btn-warning");
}
 
 
</script>
</head>
<body style="padding:50px 10px ">
 
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a href="javascript:showJSONString()" class="btn" id="json">Show JSON String</a>
<a href="javascript:generateHTML()" class="btn" id="html">Generate HTML</a>
<a href="javascript:generateXML()" class="btn" id="xml">Generate XML</a>
</div>
</div>
</div>
 
<div id="output">Click a button above to transform the raw JS data.</div>
 
 
</body>
</html>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.