simzou/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">

    <title>Using Google Spreadsheets with Underscore Templates</title>
    <meta content="Pulling information from Google Docs" name="description">
    <!-- Open Graph -->
    <meta content="Google Doc to JSON"><!-- CSS -->
    <link href=
    "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel=
    "stylesheet"><!-- JavaScript -->

    <script src=
    "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="main.js"></script>
</head>

<body>
    <!-- Template for Using Tables -->
    <script id="table_template" type="text/template">
        <table class="table">
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Description</th>
                    <th>URL</th>
                </tr>

                <% _.each(rows, function(row, index) { %>
                    <tr>
                        <td><%= row.id %></td>
                        <td><%= row.title %></td>
                        <td><%= row.description %></td>
                        <td><%= row.imageurl %></td>
                    </tr>

                <% }); %>
            </table>
    </script>

    <!-- Template for Using Linear Sections -->

    <script id="section_template" type="text/template">
        <% _.each(rows, function(row, index) { %>
            <div class="row">
                <h2><%= row.id %>. <%= row.title %></h2>
                    <img src="<%= row.imageurl %>" class="img-responsive" alt="<%=row.title %>" width="50%">
                    <p>
                        <%= row.description %>
                    </p>
            </div>
            <% }); %>
    </script>

    <!-- Template for Using Bootstrap Grids -->

    <script id="grid_template" type="text/template">
        <% _.each(rows, function(row, index) { %>

            <!-- We start a new row at every third item -->
            <% if(index % 3 == 0) { %>
                <div class="row">
            <% } %>

                <div class="col-md-4 same-height-column">
                    <p>Index: <%= index %></p>
                    <h3><%= row.id %>. <%= row.title %></h3>
                    <img src="<%= row.imageurl %>" class="img-responsive" alt="<%=row.title %>" height="50%">
                    <div class="caption">
                    <p>
                        <%= row.description %>
                    </p>
                    </div>
                </div>
            <% if(index % 3 == 2) { %>
                </div>
            <% } %>

            <% }); %>
    </script>

    <header></header>

    <main>


        <div class="container">
            <h1>Using Google Spreadsheets with Underscore Templates</h1>
            <p>This is a demo of creating web pages pulling data from a google
            spreadsheet. The following table and sections pull from
            <a href="https://docs.google.com/spreadsheets/d/1MQnK8Wl5IfnBgLBP9Ab-pCp6Di-V3vRmNoi2sRC3N2E/">
            this google spreadsheet</a>.

            <h2>Sample Table</h2>

            <div id="myTable"></div>

            <h2>Sample Sections</h2>

            <div id="mySection"></div>

            <h2>Sample (Responsive) Grid</h2>

            <div id="myGrid"></div>
        </div>
    </main>

    <footer></footer>
</body>
</html>

## main.js
$(document).ready(function(){
    url = "https://spreadsheets.google.com/feeds/list/1MQnK8Wl5IfnBgLBP9Ab-pCp6Di-V3vRmNoi2sRC3N2E/od6/public/values?alt=json"

	$.getJSON(url, function(json){
		var data = clean_google_sheet_json(json);
	    compile_and_insert_html('#table_template','#myTable',data);
	    compile_and_insert_html('#section_template','#mySection',data);
	    compile_and_insert_html('#grid_template','#myGrid',data);
	});

});

// Takes in template id, compiles the template to html using data json object
// and then inserts it into given div id
function compile_and_insert_html(template_id, div_id, data) {
	var template = _.template($(template_id).html());
	var template_html = template({
		'rows': data
	});
	$(div_id).html(template_html);
}


// takes in JSON object from google sheets and turns into a json formatted
// this way based on the original google Doc
// [
// 	{
// 		'column1': info1,
// 		'column2': info2,
// 	}
// ]
function clean_google_sheet_json(data){
	var formatted_json = [];
	var elem = {};
	var real_keyname = '';
	$.each(data.feed.entry, function(i, entry) {
		elem = {};
		$.each(entry, function(key, value){
			// fields that were in the spreadsheet start with gsx$
			if (key.indexOf("gsx$") == 0)
			{
				// get everything after gsx$
				real_keyname = key.substring(4);
				elem[real_keyname] = value['$t'];
			}
		});
		formatted_json.push(elem);
	});
	return formatted_json;
}

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta content="width=device-width, initial-scale=1.0" name="viewport">

	<title>Using Google Spreadsheets with Underscore Templates</title>
	<meta content="Pulling information from Google Docs" name="description">
	<!-- Open Graph -->
	<meta content="Google Doc to JSON"><!-- CSS -->
	<link href=
	"http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel=
	"stylesheet"><!-- JavaScript -->

	<script src=
	"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
	<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
	<script src="main.js"></script>
	</head>

	<body>
	<!-- Template for Using Tables -->
	<script id="table_template" type="text/template">
	<table class="table">
	<tr>
	<th>ID</th>
	<th>Name</th>
	<th>Description</th>
	<th>URL</th>
	</tr>

	<% _.each(rows, function(row, index) { %>
	<tr>
	<td><%= row.id %></td>
	<td><%= row.title %></td>
	<td><%= row.description %></td>
	<td><%= row.imageurl %></td>
	</tr>

	<% }); %>
	</table>
	</script>

	<!-- Template for Using Linear Sections -->

	<script id="section_template" type="text/template">
	<% _.each(rows, function(row, index) { %>
	<div class="row">
	<h2><%= row.id %>. <%= row.title %></h2>
	<img src="<%= row.imageurl %>" class="img-responsive" alt="<%=row.title %>" width="50%">
	<p>
	<%= row.description %>
	</p>
	</div>
	<% }); %>
	</script>

	<!-- Template for Using Bootstrap Grids -->

	<script id="grid_template" type="text/template">
	<% _.each(rows, function(row, index) { %>

	<!-- We start a new row at every third item -->
	<% if(index % 3 == 0) { %>
	<div class="row">
	<% } %>

	<div class="col-md-4 same-height-column">
	<p>Index: <%= index %></p>
	<h3><%= row.id %>. <%= row.title %></h3>
	<img src="<%= row.imageurl %>" class="img-responsive" alt="<%=row.title %>" height="50%">
	<div class="caption">
	<p>
	<%= row.description %>
	</p>
	</div>
	</div>
	<% if(index % 3 == 2) { %>
	</div>
	<% } %>

	<% }); %>
	</script>

	<header></header>

	<main>


	<div class="container">
	<h1>Using Google Spreadsheets with Underscore Templates</h1>
	<p>This is a demo of creating web pages pulling data from a google
	spreadsheet. The following table and sections pull from
	<a href="https://docs.google.com/spreadsheets/d/1MQnK8Wl5IfnBgLBP9Ab-pCp6Di-V3vRmNoi2sRC3N2E/">
	this google spreadsheet</a>.

	<h2>Sample Table</h2>

	<div id="myTable"></div>

	<h2>Sample Sections</h2>

	<div id="mySection"></div>

	<h2>Sample (Responsive) Grid</h2>

	<div id="myGrid"></div>
	</div>
	</main>

	<footer></footer>
	</body>
	</html>
	$(document).ready(function(){
	url = "https://spreadsheets.google.com/feeds/list/1MQnK8Wl5IfnBgLBP9Ab-pCp6Di-V3vRmNoi2sRC3N2E/od6/public/values?alt=json"

	$.getJSON(url, function(json){
	var data = clean_google_sheet_json(json);
	compile_and_insert_html('#table_template','#myTable',data);
	compile_and_insert_html('#section_template','#mySection',data);
	compile_and_insert_html('#grid_template','#myGrid',data);
	});

	});

	// Takes in template id, compiles the template to html using data json object
	// and then inserts it into given div id
	function compile_and_insert_html(template_id, div_id, data) {
	var template = _.template($(template_id).html());
	var template_html = template({
	'rows': data
	});
	$(div_id).html(template_html);
	}


	// takes in JSON object from google sheets and turns into a json formatted
	// this way based on the original google Doc
	// [
	// {
	// 'column1': info1,
	// 'column2': info2,
	// }
	// ]
	function clean_google_sheet_json(data){
	var formatted_json = [];
	var elem = {};
	var real_keyname = '';
	$.each(data.feed.entry, function(i, entry) {
	elem = {};
	$.each(entry, function(key, value){
	// fields that were in the spreadsheet start with gsx$
	if (key.indexOf("gsx$") == 0)
	{
	// get everything after gsx$
	real_keyname = key.substring(4);
	elem[real_keyname] = value['$t'];
	}
	});
	formatted_json.push(elem);
	});
	return formatted_json;
	}