Async loading in Google Apps Script and HTML template in Sheet Script editor

Question

I am trying to load data asynchronously to the HTML file in the Google Script editor.

My current output is as follows:

<ul id="cats">              
<?
var cat = BASIC_DATA.categories;
for(var i=2;i<cat.length;i++){
var categoryName = cat[i][0];
var categoryIcon = ICON[cat[i][0]];
var categoryNumb = cat[i][1];
?>
<li name="<?=categoryName?>" type="category"><span class="icon" style="background-position:<?=categoryIcon?>;"></span><span class="title"><?=categoryName?></span><?='('+categoryNumb+')'?></li>
<?
}
?>
</ul>

What I am trying to achieve is the following, but using the method suggested by Google here HTML Service: Best Practices

  $(function() {
  google.script.run.withSuccessHandler(showThings)
      .getLotsOfThings();
});


  function showThings(cat) {
  var list = $('#cats');
  var cat = BASIC_DATA.categories;
  var categoryName = cat[i][0];
  var categoryIcon = ICON[cat[i][0]];
  var categoryNumb = cat[i][1];
  list.empty();
  for (var i = 0; i < cat.length; i++) {
  list.append('<li name="' + categoryName + '" type="category"><span class="icon" style="background-position:' + categoryIcon + '"></span><span class="title">' + categoryName + '</span>(' + categoryNumb + ')</li>');
  console.log(list);
  }
  }

So far my list is empty and I get errors in the console

TypeError: google.script.run.withSuccessHandler(...).getLotsOfThings is not a function

Here is my getLotsOfThings() function in Code.gs

    function getLotsOfThings(){
  var tabSheetCategories = SpreadsheetApp.openById(SHEET_ID).getSheetByName(CATEGORIES);
  var tabSheetAbout = SpreadsheetApp.openById(SHEET_ID).getSheetByName(ABOUT_DATA);
  var tabSheetHelp = SpreadsheetApp.openById(SHEET_ID).getSheetByName(HELP_DATA);
  BASIC_DATA = {
    "tab_about" : getValue(tabSheetAbout,"A2"),
    "tab_help": getValue(tabSheetHelp,"A2"),
    "categories": tabSheetCategories.getDataRange().getValues()
  };
  return false; 
    }

It looks like you are don't return anything anywhere in getLotsOfThings(). The returned data will be passed to the HTML-sideshowThings() function. — Chris
– Chris, Commented Feb 20, 2019 at 18:46
I have tried it now, but this time getting ReferenceError: BASIC_DATA is not defined error. I know for sure that it is defined as I can access the array with my initial code. — AlexB
– AlexB, Commented Feb 20, 2019 at 18:51
Am I correct in assuming you are using HtmlService.createTemplateFromFile()? And where is BASIC_DATA defined in your script block? — TheWizEd
– TheWizEd, Commented Feb 20, 2019 at 19:08
@TheWizEd, you are in the following function: function include(filename) { return HtmlService.createHtmlOutputFromFile(filename) .getContent(); } — AlexB
– AlexB, Commented Feb 20, 2019 at 19:10
But how are you using include, it is also a method of merging files in an HtmlTemplate? — TheWizEd
– TheWizEd, Commented Feb 20, 2019 at 19:26

Chris · Accepted Answer · 2019-02-20 19:09:53Z

function getLotsOfThings(){
  var tabSheetCategories = 
  SpreadsheetApp.openById(SHEET_ID).getSheetByName(CATEGORIES);
  var tabSheetAbout = SpreadsheetApp.openById(SHEET_ID).getSheetByName(ABOUT_DATA);
  var tabSheetHelp = SpreadsheetApp.openById(SHEET_ID).getSheetByName(HELP_DATA);
  var BASIC_DATA = {
    "tab_about" : getValue(tabSheetAbout,"A2"),
    "tab_help": getValue(tabSheetHelp,"A2"),
    "categories": tabSheetCategories.getDataRange().getValues()
  };
 return BASIC_DATA; //Return the data to the client-side.
}

The HTML client-side code and the serverside code (Code.gs) run separately. We must pass something back to the client-side. Now we have an object client-side that we have to deal with...

  function showThings(basicData) {
  var list = $('#cats');
  //var cat = BASIC_DATA.categories; //BASIC_DATA doesn't exist client-side, it's now passed in as 'basicData'
  Logger.log(JSON.toString(basicData)); //This is the data that has been passed in. It is a JSON object. You CANNOT use variables from the server-side script, only what hav been passed over.
  var cat = basicData.categories;
  //Do something with categories data...

Collectives™ on Stack Overflow

Async loading in Google Apps Script and HTML template in Sheet Script editor

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related