HTML 在应用程序脚本 return 值之前加载和触发函数

Question

我有一个服务器端代码。

然后是客户端 javascript 和使用 bootstrap.

制作的 html 页面

我面临的问题是以某种方式在服务器端 returns 值之前加载文档。

这是我的服务器端代码

Edit: you must mean client side here

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

我正在尝试从 google sheet 获取的数据中加载 table，但它 returns 为空数组。在服务器端，我能够看到日志和数组有值。但在客户端显示为空。

Answer 1

这不会运行在评估期间：

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

function fetchdata(dataArray) {
  alert(dataArray)
}

上述过程运行在文档加载之后 HTML 甚至在调用 datafetch() 之前加载

Answer 2

你总是可以试试这个：

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

Answer 3

调查结果

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

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

function fetchdata(dataArray) {
//code
}

null 结果很可能是由于您在包含 date/time 的服务器端代码中使用的 getValues() 方法所致。您应该使用 getDisplayValues() instead & adjust your server side code accordingly. See this 答案。

Note: Correct me if I'm mistaken about you do not have any time/date values on your sheet that you're fetching. Then, you can share your sheet file with sample actual data to better replicate your issue.

测试

1.) 测试了下面的客户端代码并使用 alert(dataArray) 方法快速查看数组数据是否成功 fetched/shown

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.) 测试 Sheet 使用的“数据”：

测试结果

When using getDisplayValues() on server side, it returns the actual array values

When using getValues() on server side, it returns null

HTML 在应用程序脚本 return 值之前加载和触发函数

HTML loads and fire function before apps script return value

html

javascript

web-applications

google-apps-script

调查结果

测试

测试结果