TableTop.js - turn a google sheet into a JavaScript object
How do I make an tabletop.js - turn a google sheet into a javascript object?
What is a tabletop.js - turn a google sheet into a javascript object? How do you make a tabletop.js - turn a google sheet into a javascript object? This script and codes were developed by Stuart Allen on 18 January 2023, Wednesday.
TableTop.js - turn a google sheet into a JavaScript object - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>TableTop.js - turn a google sheet into a JavaScript object</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
</head>
<body> <!-- handlebars placeholders -->
<div id="listItems"></div>
<div id="modals"></div>
<!-- handlebars template scripts -->
<script id="entry-template" type="text/x-handlebars-template"> {{#eachByServiceId this}} <div class="list-item {{serviceType}} {{serviceProvider}} {{#each serviceStages}}{{this}} {{/each}}" data-toggle="modal" data-target="#{{serviceId}}-modal">{{serviceName}}{{#if serviceSubs}}<br><small class="list-item__serviceSubs">{{serviceSubs}}</small>{{/if}}</div> {{/eachByServiceId}}
</script>
<script id="serviceModal-template" type="text/x-handlebars-template"> {{#each this}} <div class="modal fade" id="{{serviceId}}-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">{{serviceName}}</h4> </div> <div class="modal-body"> <p>Info about {{serviceName}}</p> <a href="#">Link to {{serviceName}} site</a> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> {{/each}}
</script> <script src='https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.4.3/tabletop.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
TableTop.js - turn a google sheet into a JavaScript object - Script Codes JS Codes
//
// Handlebars helpers
//
// Sort
Handlebars.registerHelper('eachByServiceId', function(data, options) { var output = ''; var contextSorted = data.concat() .sort(function(a, b) { return compareStrings(a.serviceType, b.serviceType); }) for (var i = 0, j = contextSorted.length; i < j; i++) { output += options.fn(contextSorted[i]); } return output;
});
// Sort helper
function compareStrings(a, b) { // case-insensitive comparison a = a.toLowerCase(); b = b.toLowerCase(); return (a < b) ? -1 : (a > b) ? 1 : 0;
}
// declare the google sheet using a published spreadsheet
var public_spreadsheet_url = 'https://docs.google.com/spreadsheets/d/1Fr1pMFJzPLujcD22Wx1PQsu3WBpI9h9-5rj0qwN4cRM/pubhtml';
function init() { Tabletop.init({ key: public_spreadsheet_url, callback: showInfo, simpleSheet: true })
}
function showInfo(data, tabletop) { var list = $("#listItems"), modals = $("#modals"); // get templates wrapped in scripts tags var source = $("#entry-template").html(), modalSource = $("#serviceModal-template").html(); // compile template with handlebars var template = Handlebars.compile(source), modalTemplate = Handlebars.compile(modalSource); // sort data by numerical attribute // data.sort( function(a,b) { return a.serviceId - b.serviceId; } ); list.html(template(data)); modals.html(modalTemplate(data));
}
init()
![TableTop.js - turn a google sheet into a JavaScript object - Script Codes](http://shots.codepen.io/rarebush/pen/NbOrKe-512.jpg)
Developer | Stuart Allen |
Username | rarebush |
Uploaded | January 18, 2023 |
Rating | 3 |
Size | 2,681 Kb |
Views | 6,072 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
WOL 2 styleguide | 38,783 Kb |
Blur background on search focus | 2,833 Kb |
Dashboard Builder - geochart | 2,874 Kb |
Shuffle.js test | 16,393 Kb |
Animated leaderboard | 5,701 Kb |
One Wiley Colors | 2,664 Kb |
HUB styles | 13,840 Kb |
AAA Header | 17,153 Kb |
TableTop.js - turn a google sheet into a JavaScript object | 2,681 Kb |
Aasld large links | 34,652 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Tile Animation Thing | Frxnz | 4,332 Kb |
Perspective Origin Demo | Agelber | 3,614 Kb |
Sass Radar | Jlong | 6,887 Kb |
We Simplify animation | Meodai | 48,169 Kb |
A Pen by Michael Parenteau | Michaelparenteau | 2,133 Kb |
Lecture 1 | Law | 0 Kb |
SVG Basics | HipsterBrown | 1,852 Kb |
Slider for stackoverflow | KKOKU | 3,222 Kb |
Product item | Mymahesh11 | 2,256 Kb |
Canvas Orbital Trails v2 | Jackrugile | 3,421 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!