在工作表脚本编辑器中的Google Apps脚本和HTML模板中异步加载

时间:2019-02-20 18:23:30

标签: html google-apps-script web-applications

我正在尝试将数据异步加载到Google脚本编辑器中的HTML文件中。

我当前的输出如下:

<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>

以下是我要实现的目标,但是请使用Google在这里建议的方法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);
  }
  }

到目前为止,我的列表为空,并且在控制台中出现错误

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

这是我在getLotsOfThings()中的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; 
    }

1 个答案:

答案 0 :(得分:1)

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.
}

HTML客户端代码和服务器端代码(Code.gs)分别运行。我们必须将某些东西传递回客户端。现在我们有了对象客户端,必须处理...

  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...
相关问题