0

First off, I am NOT a professional programmer, which is why I am here for help, so thanks in advance for your time and patience. I need a bit of code for a website that will call and display information from a specific field in a published Google spreadsheet, to be displayed via HTML, through javascript or some other similar method.

Looking around, there seems to be several ways of doing this, but all of the examples and tricks I can find are a bit beyond my expertise, and my efforts at applying several of those methods have, frankly, failed miserably. I have searched through previous questions, but they all cite examples that are way more complicated than what I need.

If someone could cite me an easy example, I'd greatly appreciate it. (The simpler the better.) In the meanwhile, I will continue to experiment to see what I can do.

Robert Hicks
  • 1
  • 2
  • 1
    Can you show us the code that you're asking us to help with, that illustrates your problem? Questions asking for us to link you to off-site resources (whatever that resource might be) will be closed as 'off-topic.' – David Thomas Apr 05 '15 at 05:51
  • This really depends on your definition of simple. – jdphenix Apr 05 '15 at 06:03
  • That really highlights the problem. I have a spreadsheet "published to web" through my google account, and I need to display the text in Box A2, in the body of a website that I am building from a bootstrap template. The idea is building a site that I can update information through my google account, rather than having to re-upload html files every time we have an event change. I am basically trying to figure out a query function that asks for information from the Google Spreadsheet, and then displays it. I figure that's about 5 lines of javascript, but I'm sort of at my limit there. – Robert Hicks Apr 05 '15 at 06:09

1 Answers1

0

This is a duplicate of How can I access Google Sheet spreadsheets only with Javascript?

But since that example is not trivial for beginners, here is the code that will show the second cell of the spreadsheet using the code from the answer above

  1. Go to https://github.com/mikeymckay/google-spreadsheet-javascript and download the file google-spreadsheet.js
  2. Edit that file with a text editor and change
    • this.jsonCellsUrl = "http:// to this.jsonCellsUrl = "// and
    • this.jsonListUrl = "http:// to this.jsonListUrl = "// to not have mixed http and https in your page
  3. Change the var url in the below to point your sheet

FIDDLE

<!DOCTYPE html>
<html>
<head>
<title>Spreadsheet example</title>
<script type='text/javascript' src='//code.jquery.com/jquery-1.11.0.js'></script>
<script type='text/javascript' src='google-spreadsheet.js'></script>
<script type='text/javascript'>  
$(function() {

  var url = "https://spreadsheets.google.com/pub?key=0Ago31JQPZxZrdHF2bWNjcTJFLXJ6UUM5SldEakdEaXc&hl=en&output=html";

  var googleSpreadsheet = new GoogleSpreadsheet();
  googleSpreadsheet.url(url);
  googleSpreadsheet.load(function(result) {
    $('#results').html(result.data[1]); // show the 2nd (0-based) cell
  });
});
</script>
</head>
<body>
Here is the result: <span id="results"></span>
</body>
</html>
Community
  • 1
  • 1
mplungjan
  • 169,008
  • 28
  • 173
  • 236
  • Hrm. I can see how this should work, I think, (at least in bits.) I have copied the edited text into the head section of my doc and the result span in the body, I also downloaded the .js file into the same folder as the index.html file and made the two edits there. Unfortunately, this doesn't appear to have solved the problem. I sincerely appreciate your time, regardless, and will keep working at your solution to see what I'm missing. – Robert Hicks Apr 05 '15 at 06:46
  • Hit F12 and look at the console errors. Also see what result might be by adding `window.console&&console.log(result);` before the `$('#results").html()` line – mplungjan Apr 05 '15 at 12:26