如何根据单元格值将 Google Sheet 中的数据显示到 Google Web App？

Question

我正在尝试根据工作表单元格中的值将数据从 Google 工作表显示到 Google Web App。因此，当值为“YES”时，用户可以看到表格数据，否则显示拒绝警报。为了清楚起见，流程如下：

1. 用户提交已在 Google 表格中的代码
2. 系统检查代码行审批列的值为“YES”
3. 如果值为“YES”，则获取Google Sheet中提交代码行的数据
4. 以表格形式显示数据

我尝试使用我的代码，如果值不是“YES”，它可能会提醒拒绝，但如果值是“YES”，我会收到错误：

未捕获的类型错误：无法读取 null 的属性“10”

有办法解决吗？您的回复将不胜感激:)

这是我的 Javascript 代码示例：

function submitCode(){
  var code = document.getElementById("codeInput").value;
  google.script.run.withSuccessHandler(view).checkTable(code);
}

function view(array){
  if (typeof array === 'string') {
   alert(array);
  }else{
   var tbody = document.getElementById("table-body");
   
   var row = document.createElement("tr");
   var col1 = document.createElement("td");
   col1.textContent = array[0];
   var col2 = document.createElement("td");
   col2.textContent = array[1];
   var col3 = document.createElement("td");
   col3.textContent = array[2];
   
   row.appendChild(col1);
   row.appendChild(col2);
   row.appendChild(col3);
  }
}

这是我的 .gs 代码示例：

function checkTable(code){
  var url =  PropertiesService.getScriptProperties().getProperty('url');
  var ss = SpreadsheetApp.openByUrl(url);
  var ws = ss.getSheetByName("Sheet1");
  var data = ws.getRange(5, 1, ws.getLastRow()-1, 4).getValues();
  
  var codeList = data.map(function(r){return r[0].toString(); });
  var position = codeList.indexOf(code); 
  var approval1 = data.map(function(r){return r[1]; });
  var approval2= data.map(function(r){return r[2]; });
  
  if(approval1[position] == "YES"){
    getTable(code);
  }else if(approval2[position] == "YES"){
    getTable(code);
  }else{
    return "Sorry You cannot see the table";
  }
}

function getTable(code){
  var url =  PropertiesService.getScriptProperties().getProperty('url');
  var ss = SpreadsheetApp.openByUrl(url);
  var ws = ss.getSheetByName("Sheet1");
  var data = ws.getRange(5, 1, ws.getLastRow()-1, 6).getValues();
  
  var codeList = data.map(function(r){return r[0].toString(); });
  var position = codeList.indexOf(code); 

  var things1= data.map(function(r){return r[3]; });
  var things2= data.map(function(r){return r[4]; });
  var things3= data.map(function(r){return r[5]; });

  var array = [things1[position], things2[position], things3[position]];
}

Answer 1

这个修改怎么样？

修改点：

• 在您的脚本中，在 Google Apps 脚本端，getTable() 和 checkTable() 不会返回值，而 return "Sorry You cannot see the table"; 会返回。我认为这是您的问题的原因。
• 作为另一个修改点，在 HTML 和 Javascript 端，tbody.appendChild(row) 未被使用。这样，创建的元素就不会显示出来。

当以上几点反映到你的脚本中时，它变成如下。

修改脚本：

Google Apps 脚本方面：

function checkTable(code){
  var url =  PropertiesService.getScriptProperties().getProperty('url');
  var ss = SpreadsheetApp.openByUrl(url);
  var ws = ss.getSheetByName("Sheet1");
  var data = ws.getRange(5, 1, ws.getLastRow()-1, 4).getValues();
  
  var codeList = data.map(function(r){return r[0].toString(); });
  var position = codeList.indexOf(code); 
  var approval1 = data.map(function(r){return r[1]; });
  var approval2= data.map(function(r){return r[2]; });
  
  if(approval1[position] == "YES" || approval2[position] == "YES"){  // Modified
    return getTable(code);  // Added
  }else{
    return "Sorry You cannot see the table";
  }
}

function getTable(code){
  var url =  PropertiesService.getScriptProperties().getProperty('url');
  var ss = SpreadsheetApp.openByUrl(url);
  var ws = ss.getSheetByName("Sheet1");
  var data = ws.getRange(5, 1, ws.getLastRow()-1, 6).getValues();
  
  var codeList = data.map(function(r){return r[0].toString(); });
  var position = codeList.indexOf(code); 

  var things1= data.map(function(r){return r[3]; });
  var things2= data.map(function(r){return r[4]; });
  var things3= data.map(function(r){return r[5]; });

  var array = [things1[position], things2[position], things3[position]];
  return array;  // Added
}

HTML & Javascript 端

function view(array){
  if (typeof array === 'string') {
   alert(array);
  }else{
   var tbody = document.getElementById("table-body");
   
   var row = document.createElement("tr");
   var col1 = document.createElement("td");
   col1.textContent = array[0];
   var col2 = document.createElement("td");
   col2.textContent = array[1];
   var col3 = document.createElement("td");
   col3.textContent = array[2];
   
   row.appendChild(col1);
   row.appendChild(col2);
   row.appendChild(col3);

   tbody.appendChild(row);  // Added
  }
}