duanemoody/ich-loop.js

## ich-loop.js
$(document).ready( function() {
    $('#display').click(function () {
        var data = [
        {
            "name": "Paul McCartney",
            "email": "paul.mccartney@beatles.com",
            "salary": "400"
        },
        {
            "name": "John Lennon",
            "email": "john.lennon@beatles.com",
            "salary": "450"
        },
        {
            "name": "George Harrison",
            "email": "george.harrison@beatles.com",
            "salary": "400"
        },
        {
            "name": "Ringo Starr",
            "email": "ringo.starr@beatles.com",
            "salary": "300"
        }
        ];
        var table = ich.displayTable({
            "users": data
        });
        $('#container').append(table);
    });
});

## index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/transitional.dtd">
<html>
    <head>
        <title>ICanHaz.js loop demo</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/ICanHaz.js/0.10/ICanHaz.min.js"></script>
        <script type="text/javascript" src="ich-loop.js"></script>
        <script id="displayTable" type="text/html">
            <table border="1">
                <thead>
                    <tr>
                        <td>Name</td>
                        <td>Email</td>
                        <td>Salary</td>
                    </tr>
                </thead>
                <tbody>
                    {{#users}}
                    <tr>
                        <td>{{ name }}</td>
                        <td>{{ email }}</td>
                        <td>{{ salary }}</td>
                    </tr>
                    {{/users}}
                </tbody>
            </table>
        </script>
    </head>
    <body>
        <p>
            ICanHaz will render each table row using mustache loop notation.
        </p>
        <button id="display">click to add message</button>
        <div id="container"></div>
    </body>
</html>
	$(document).ready( function() {
	$('#display').click(function () {
	var data = [
	{
	"name": "Paul McCartney",
	"email": "paul.mccartney@beatles.com",
	"salary": "400"
	},
	{
	"name": "John Lennon",
	"email": "john.lennon@beatles.com",
	"salary": "450"
	},
	{
	"name": "George Harrison",
	"email": "george.harrison@beatles.com",
	"salary": "400"
	},
	{
	"name": "Ringo Starr",
	"email": "ringo.starr@beatles.com",
	"salary": "300"
	}
	];
	var table = ich.displayTable({
	"users": data
	});
	$('#container').append(table);
	});
	});
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/transitional.dtd">
	<html>
	<head>
	<title>ICanHaz.js loop demo</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/ICanHaz.js/0.10/ICanHaz.min.js"></script>
	<script type="text/javascript" src="ich-loop.js"></script>
	<script id="displayTable" type="text/html">
	<table border="1">
	<thead>
	<tr>
	<td>Name</td>
	<td>Email</td>
	<td>Salary</td>
	</tr>
	</thead>
	<tbody>
	{{#users}}
	<tr>
	<td>{{ name }}</td>
	<td>{{ email }}</td>
	<td>{{ salary }}</td>
	</tr>
	{{/users}}
	</tbody>
	</table>
	</script>
	</head>
	<body>
	<p>
	ICanHaz will render each table row using mustache loop notation.
	</p>
	<button id="display">click to add message</button>
	<div id="container"></div>
	</body>
	</html>