Skip to content

Instantly share code, notes, and snippets.

@logankoester

logankoester/add_info_example.html

Created October 16, 2011 05:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save logankoester/1290535 to your computer and use it in GitHub Desktop.
Save logankoester/1290535 to your computer and use it in GitHub Desktop.
Download ZIP
Add JSON info to a table using ICanHazJS to render an embedded Mustache template
Raw
add_info_example.html
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="https://raw.github.com/andyet/ICanHaz.js/master/ICanHaz.min.js"></script>
<script type="text/javascript">
var add_info = function(data){
var parsedData = $.map(data, function(item){
var keys = $.map(item, function(k, v){return({name: v})});
return({'keys': keys});
});
var html = ich.info_table({info: parsedData});
$('#info').append(html);
};
/* Let's try it out.. */
$(document).ready(function(){
var data = [
{"fans": 50, "twitter_id": "1", "name": "foo"},
{"fans": 32, "twitter_id": "2", "name": "bar"}
];
add_info(data);
});
</script>
</head>
<body>
<script id="info_table" type="text/html">
<table border="1">
{{#info}}
<tr>{{>info_keys}}</tr>
{{/info}}
</table>
</script>
<script id="info_keys" class="partial" type="text/html">
{{#keys}}
<td>{{name}}</td>
{{/keys}}
</script>
<div id="info"></div>
</body
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment