在应用程序脚本返回值之前加载 HTML 并触发函数

Question

我有一个服务器端代码。

然后是客户端 javascript 和使用引导程序制作的 html 页面。

我面临的问题是文档在服务器端返回值之前加载。

这是我的服务器端代码

编辑：您必须在这里指客户端

document.addEventListener('DOMContentLoaded', function() {
    
    google.script.run.withSuccessHandler(fetchdata).datafetch();
   
  });

function fetchdata(dataArray)
  
  {
  let tbody = document.getElementById('perf1');
  
  for (var i=0; i<dataArray.length;i++)
  {
    
    var row = document.createElement("tr")
    row.setAttribute("style","height:2px;")
    for (var j=0; j<dataArray[i].length; j++)
     {
           var col = document.createElement("td")
           
           if (j==0)
           {
           col.innerText = dataArray[i][j]
           }
    row.appendChild(col)
     }
     tbody.appendChild(row);
  }
}

这是服务器端代码：

function datafetch()
{
   
  var ss2 = SpreadsheetApp.openById('xxxxxx');
  var sheet = ss2.getSheetByName('Video');
  var email = Session.getActiveUser().getEmail();
  email = email.replace(/@gmail.com/g, "")
  var lrow = sheet.getLastRow();
  var a = sheet.getRange("A1:A"+lrow).getValues();
  a=a.filter(String)
  
  var data = sheet.getRange("A2:R"+a.length).getValues();
  
  var data1 = data.filter(function(item){return item[9] == email}).map(elem => elem[0]);
  data1.flat();
  
  Logger.log(data1)
  
  return data1;
}

我正在尝试从我从谷歌表中获取的数据中加载一个表，但它返回空数组。在服务器端，我可以看到日志和数组有值。但在客户端它显示为空。

Answer 1

发现

在我的测试中，您当前的以下代码结构应该可以正常工作，因为它将首先加载 HTML 文件，然后再从电子表格中获取数组数据：

document.addEventListener("DOMContentLoaded", function(){
 google.script.run.withSuccessHandler(fetchdata).datafetch();
});

function fetchdata(dataArray) {
//code
}

• null 结果很可能是由于您在包含日期/时间的服务器端代码上使用的getValues() 方法。您应该改用getDisplayValues() 并相应地调整您的服务器端代码。请参阅此reference 答案。

注意：如果我弄错了您的工作表上没有您要获取的任何时间/日期值，请纠正我。然后，您可以与示例实际数据共享您的工作表文件，以更好地复制您的问题。

测试

1.) 在下面测试了这个客户端代码并使用alert(dataArray) 方法快速查看数组数据是否成功获取/显示

document.addEventListener("DOMContentLoaded", function(){

 google.script.run.withSuccessHandler(fetchdata).datafetch();

});

function fetchdata(dataArray) {

alert(dataArray);

}

2.) 在服务器端代码使用getDisplayValues()：

function datafetch(){
  var values = SpreadsheetApp.getActive().getSheetByName('Data').getDataRange().getDisplayValues();
  Logger.log(values);
  return values;
}

3.) 使用的测试表“数据”：

测试结果

在服务器端使用 getDisplayValues() 时，它返回实际的数组值

在服务器端使用 getValues() 时，返回 null

Answer 2

这不会在评估期间运行：

document.addEventListener('DOMContentLoaded', function() {
    google.script.run.withSuccessHandler(fetchdata).datafetch();
  });

function fetchdata(dataArray) {
  alert(dataArray)
}

上面的过程在文档加载之后运行，所以是的，HTML 在 datafetch() 被调用之前加载

Answer 3

你总是可以试试这个：

<script>
  function ready() {
    google.script.run.withSuccessHandler(fetchdata).datafetch();
  }
  function fetchdata(dataArray) {
    alert(dataArray)
  }
  document.addEventListener("DOMContentLoaded", ready);
</script>