Using Google Spreadsheets as JSON Source
How do I make an using google spreadsheets as json source?
Proof of concept to show how to pull json data from a google spreadsheet and display in a page. Based on examples from https://coderwall.com/p/duapqq and http://josephfitzsimmons.com/getting-json-data-from-google-spreadsheets-and-using-it-in-google-maps/. What is a using google spreadsheets as json source? How do you make a using google spreadsheets as json source? This script and codes were developed by Martin Boyce on 20 September 2022, Tuesday.
Using Google Spreadsheets as JSON Source - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Using Google Spreadsheets as JSON Source</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
</head>
<body> <div class="container-fluid"> <div class="row"> <div class="col-xs-12"> <h1>Google Sheets as a JSON source</h1> <p class="lead">Fetch the data from a Google spreadsheet with Sutherland Library bulk loan data as json using ajax and display in a table.</p> <table id="loans" class="table table-hover table-bordered"> <thead> <tr> <th>Language</th> <th>Branch</th> <th>Title List</th> <th>Return Date</th> <th>We asked for…</th> </tr> </thead> <tbody></tbody> </table> </div> <!-- /column --> </div> <!-- /row -->
</div>
<!-- /container --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Using Google Spreadsheets as JSON Source - Script Codes JS Codes
var jsonSource = "https://spreadsheets.google.com/feeds/list/1oXeAey3ltefipz9H4puuTjIybzU3VxSJeiIeoK8Ln2o/od6/public/values?alt=json" //fetch the json feed $.getJSON( jsonSource, function() { $("<p>json request successful</p>").prependTo("#container"); }) .done(function(data) { if (data.feed.entry.length > 0) { $.each( data.feed.entry, function( i, item ) { var $language = item.gsx$language.$t; var $branch = item.gsx$branchlocation.$t; var $retDate = item.gsx$returndate.$t; var $subject = item.gsx$weaskedfor.$t; var $titleList = item.gsx$titlelistdocument.$t; var $titleListURL = item.gsx$titlelisturl.$t; var $docLink; if ($titleListURL !== "") { $docLink = "<a href='" + $titleListURL + "' target='_blank'>" + $titleList + "</a>"; } else { $docLink = $titleList; }; $("<tr><td>" + $language + "</td><td>" + $branch + //"</td><td>" + $titleListURL + "</td><td>" + $docLink + "</td><td>" + $retDate + "</td><td>" + $subject + "</td></tr>").appendTo("#loans tbody"); }); } else { // if the json request is successful but there are no items $("<p>JSON request succeeded but no data returned.</p>").prependTo("#container"); } }) .fail(function() { $("<p>JSON request fail</p>").prependTo("#container"); }) .error(function() { $("<p>JSON request error</p>").prependTo("#container"); });
Developer | Martin Boyce |
Username | boycetrus |
Uploaded | September 20, 2022 |
Rating | 3.5 |
Size | 2,492 Kb |
Views | 20,240 |
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 |
Get the app | 3,198 Kb |
Test Case for ajax fail on single result | 3,297 Kb |
Flexbox test | 2,846 Kb |
Homepage thumbnail | 1,852 Kb |
Bootstrap Panel List | 2,472 Kb |
Scratchpad | 5,672 Kb |
Sutherland Shire Libraries Catalogue Search | 2,732 Kb |
Flexbox login form | 3,551 Kb |
AJAX content from an RSS feed using jQuery | 3,878 Kb |
Google Maps API Custom Overlay | 3,336 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 |
Countdown with Rings | Ewganoel | 2,490 Kb |
A Bouncy Menu Toggle | Billyysea | 4,563 Kb |
NAV WPMANAGER | Mstoic | 1,991 Kb |
Animated bar chart | CreativePunch | 3,124 Kb |
Pattern lab logo | TimPietrusky | 3,666 Kb |
Experiment - SCSS SVG Background Image with Variables | See8ch | 3,270 Kb |
A Pen by Huan Nghiem | Nightshade | 10,646 Kb |
Jstam.com Home Page | Jstam | 10,558 Kb |
Codero Sitemap | S1m0ne | 28,169 Kb |
Nested flexbox layout for library catalog | Boycetrus | 3,271 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!