Recently, I ran into requirement where I was getting JSON response and needed to render it on my Mobile application. I had two Options, Server side processing and Client side Templating. I studied and checked both way ; came to conclusion on using Client side Templating. There are many plugins and libraries available however there is one which stands different, easy to use and faster as compared to others which is “Underscore.js“.
Underscore.js library needs JQuery as prerequisite. You can find complete documentation here, Only remember following three points :
- <% %> – to execute some code
- <%= %> – to print some value in template
- <%- %> – to print some values with HTML escaped
Example Source code:
Below Example shows how to render JSON in tabular format using Underscore.js and JQuery.
<html>
<head>
<title>
Demo of Templating using underscore.js
</title>
<style type="text/css">
.outer {
border-collapse: collapse;
font: 12px/16px arial, sans-serif;
margin: 20px;
padding: 0;
}
.outer td, .outer th {
border: solid 1px #ddd;
margin: 0;
padding: 5px;
}
.outer th, .outer div.th {
background: #EEE;
font-weight: bold;
}
</style>
</head>
<body>
<table class="outer">
<thead>
<tr>
<th>Sr. No</th>
<th>Name</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script type="text/html" id='table-data'>
<% _.each(items,function(item,key,list){ %>
<tr>
<td><%= key+1 %></td>
<td><%= item.name %></td>
</tr>
<% }) %>
</script>
<script type="text/JavaScript"
src="http://code.jquery.com/jquery-1.10.2.min.js"
></script>
<script type="text/JavaScript"
src="http://underscorejs.org/underscore-min.js" ></script>
<script type="text/JavaScript" >
var items = [
{name:"Shivasoft"},
{name:"Salesforce"},
{name:"JQuery"},
{name:"UnderscoreJS"},
{name:"Template"},
{name:"Client Side Templating"}
]
var tableTemplate = $("#table-data").html();
$("table.outer tbody").html(_.template( tableTemplate,{items:items} ));
</script>
</body>
</html>
Output:
How it Works ?
- Line 31, we are going to append data in this table.
- Line 42-48, defines template on how we are going to render JSON values. We are looping through values and rendering in “td” tag of “table”.
- Line 73, Single line is doing the magic here. It is getting template which is defined between line 42 and 48 and then rendering values in table defined at line 31.
Please leave comment for feedback.
Leave a Reply