triceam/index.html

## index.html
<!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>
	<!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>