Update for January 21, 2015:Let's get started
The new Google Drive has new URL pattern for the objects (spreadsheet, especially), I think. And I haven't tinkered that.
You might want to read the Google Developers documentation about the new Drive features and probably discuss the API techniques on Stack Overflow.
Before we look at the structure, this is the public spreadsheet I created earlier :
https://docs.google.com/spreadsheets/d/1l3NStR0vghdRjxr_vmynirtDrSxIRpqZ9ln7Vuf0F9o/pubhtml
The List
It can be fetched using this URL pattern :
https://spreadsheets.google.com/feeds/list/[your_key_here]/od6/public/values?alt=json
The
[your_key_here]
is the key characters within the URL of the public published spreadsheet.Formatted JSON (list) of that public spreadsheet I created :
First method to access the values
The value within the
"feed"
➨ "entry"
➨ "gsx$..."
➨ "$t"
is the value of each cell.The "problem" using this is, if you have different value on the header cell, then the
gsx$...
thingy will be followed by different keyword.
Second method to access the values
You can also get the
"feed"
➨ "entry"
➨ "content"
➨ "$t"
.Of course, it will be longer to re-organize those on the front-end.
Anyway, as you can see above, using list, the cell header value is within the
"content"
. Because I'm using the first method, accessing the value within the "gsx$..."
, therefore, in my earlier example, I "injected" my own table header to substitute itlol?.In conclusion, if using the
"gsx$..."
, then we'll have only the "body section" values of the table we made on the spreadsheet.
The "trial and success" earlier example using jQuery, complete with independent page to see the script and all is RIGHT THERE
The Cells
It can be fetched using this URL :
https://spreadsheets.google.com/feeds/cells/[your_key_here]/od6/public/values?alt=json
Formatted JSON (cells):
The JSON format above consists of all the values within the spreadsheet with "easier to read" array element notation.
You can get the value of each cell using :
"feed"
➨ "entry"
➨ "gs$cell"
➨ "$t"
And the cell coordinate using :
- Row :
"feed"
➨"entry"
➨"gs$cell"
➨"row"
- Column :
"feed"
➨"entry"
➨"gs$cell"
➨"col"
About the ASCII table at Port Raptor :
The table on that ASCII spreadsheet is not symmetrical. So I had to tinker the arrays a little further within the JavaScript to inject those onto another asymmetrical shape.What do you know? It works!
This is all front-end tinkering. List of the implemented things there :
- CSS (styling) for making the "neat" look-able list.
- JavaScript with jQuery library :
$.get
method, or the longer complete$.ajax
method.- Creating arrays, then using native JavaScript
for
and jQueryeach()
method to iterate over the arrays elements. append()
andhtml()
methods for appending/clearing values.
You can always put the callback function within the JSON url to pass the objects.
That is all. Thanks for visiting.
Reference :
- Simple example of retrieving JSON feeds from Spreadsheets Data API at Google Developers
- JSON (JavaScript Object Notation) format : www.json.org
Guides on working with Google Sheets JSON properly developers.google.com/apps-script/guides/sheets
No comments
Post a Comment