Being a newbie in web development, I am trying to extract data from a Google sheet and visualize it within a Javascript-animated canvas object.
However, navigating through the Google Sheets API documentation has been quite challenging for me. Although my basic GET application worked fine on a local Python server, I encountered an error when testing it on a hosted website. The error message starts with 'Load denied by X-Frame-Options', indicating a possible JSONP issue. Strangely, there is no clear explanation in the documentation on how to handle this as JSONP. Despite making the spreadsheet public, authentication still seems to be required.
Below is the code snippet without IDs:
<script>
var CLIENT_ID = 'my_client_id';
var SCOPES = ["https://www.googleapis.com/auth/spreadsheets.readonly"];
function checkAuth() {
gapi.auth.authorize(
{
'client_id': CLIENT_ID,
'scope': SCOPES.join(' '),
'immediate': true
}, handleAuthResult);
}
/**
* Handle response from authorization server.
*
* @param {Object} authResult Authorization result.
*/
function handleAuthResult(authResult) {
if (authResult && !authResult.error) {
// Hide auth UI, then load client library.
loadSheetsApi();
} else {
// Show auth UI, allowing the user to initiate authorization by
// clicking authorize button.
console.log('nope');
}
}
/**
/**
* Load Sheets API client library.
*/
function loadSheetsApi() {
var discoveryUrl =
'https://sheets.googleapis.com/$discovery/rest?version=v4';
gapi.client.load(discoveryUrl).then(trackDonations);
}
/**
* Print values in the donations column
*/
function trackDonations() {
gapi.client.sheets.spreadsheets.values.get({
spreadsheetId: 'my_sheet_id',
range: 'Form Responses 1!C2:C',
}).then(function(response) {
var range = response.result;
if (range.values.length > 0) {
console.log(range.values);
$('.sum').text(range.values[range.values.length-1]);
} else {
prompt('No data found.');
}
}, function(response) {
prompt('Error: ' + response.result.error.message);
});
}
</script>
<script src="https://apis.google.com/js/client.js?onload=checkAuth">
I might be overlooking something simple, so any guidance on this would be greatly appreciated! Thank you!