在 HTML 中显示作为 Google Apps 脚本代码输出的选项值

Question

已编辑：

我已经编写了 JavaScript 代码来调用 Google Apps 脚本 上的一个函数，该函数将检查我在 google 工作表中的数据并获取所需的值。

JavaScript 代码：

   function setTime(){
   var lookDate = document.getElementById("subDate").value;
   google.script.run.withSuccessHandler(dateOk).timeCheck(lookDate);
   }
   
   function dateOk(dateData){
   document.getElementById("subTime").innerHTML = dateData;
   console.log(dateData);
   }

示例场景，当用户在我的 Web 应用中选择 Date 时，它将运行 function setTime()，然后转到 Google Apps 脚本代码。我有两个函数function timeCheck(lookDate) 和function testRow(dataDisable,lookDate)。函数 timeCheck(lookDate) 将检查我在我的 Google 表格中的值并查找限制，函数 testRow(dataDisable,lookDate) 将查找限制值并更改我的 Google 表格中相应列中的值。

对于 Google Apps 脚本：

function timeCheck(lookDate){
  
  var ss = SpreadsheetApp.openByUrl(url);
  var ws = ss.getSheetByName("Test_Data");  
  var myData = ws.getRange(2, 7, ws.getLastRow()-1, 2).getValues();
  var arrData = [];
  myData.forEach(function(row){
    
  var lookup = lookDate;
  var dte = new Date (row[0]);
  var form = Utilities.formatDate(dte, 'GMT+8', 'MMM dd, yyyy');

    if(form == lookup){
      arrData.push(row[1]); 
    }    
  });
  var myVals = arrData;
  var CheckLimitReached = function (V) {
    var records= {};
    V.forEach(function (x) { records[x] = (records[x] || 0) + 1; });
    var limit_reached = Object.keys(records).filter(function (R) {
      return records[R] >= 3;});
    return limit_reached;
    
  };
   var dataDisable = CheckLimitReached(myVals);
  //testRow(dataDisable,lookDate);
  var list1= testRow(dataDisable,lookDate)
  return list1 
}



function testRow(dataDisable,lookDate){

       var ss = SpreadsheetApp.openByUrl(url); 
  var ts = ss.getSheetByName("Time_Select");
  var checkData = ts.getRange(1, 1, 1, ts.getLastColumn()).getDisplayValues()[0];

  var index = checkData.indexOf(lookDate)+1;
  var x = [];
  var dateValues = ts.getRange(2, index, ts.getLastRow()-1, 1).getValues();
  //var checkSplit = dateValues.map(function(row){return row[0]; });
  for(var i=0;i<dataDisable.length;i++){
    for(var j=0;j<dateValues.length;j++){
      if(dataDisable[i]==dateValues[j][0]){
        dateValues[j][0]="Not Available"
      }
    }
  }
  ts.getRange(2, index, ts.getLastRow()-1, 1).setValues(dateValues);
  var listVal = ts.getRange(2, index, ts.getLastRow()-1, 1);
  var list1 = listVal.getValues();//.toString();
  return list1;
}

这个函数的日志结果是：

[19-09-10 13:36:58:034 HKT] [[Not Available], [Not Available], [10:00 AM], [11:00 AM], [12:00 NN], [1:00 PM], [Not Available], [3:00 PM]

我的问题是如何将我的 html 中的值反映为选项。

这是我的 Google 表格的链接：https://docs.google.com/spreadsheets/d/1lEfzjG1zzJVPMN8r-OpeZm6q9_IqSwk9DNCEY-q7ozY/edit?usp=sharing

这是我的网络应用程序的 html 代码：

<!-- DATE SELECTION -->
       <div class="row">
          <div class="input-field col s4">
             <input id="subDate" type="text" class="datepicker">
             <label for="subDate">Select Date</label>
          </div> <!-- CLOSE TIME FIELD -->
       
 <!-- TIME SELECTION -->      
          <div class="input-field col s4">
             <select id="subTime">
                <option value="" disabled selected>Choose your preferred time</option>                  
              <?!= list1; ?>
             </select>
             <label>Select Time</label>
          </div> <!-- CLOSE TIME FIELD -->
       </div> <!-- CLOSE ROW -->

提前感谢您的回答和意见。

编辑/更新：

我已在 JavaScript 中尝试使用此代码删除现有选项并将值添加为 HMTL 中的新选项。不幸的是，什么也没发生。

JavaScript：

function dateOk(dateData){
console.log(dateData)
var selectRemove = document.getElementById("subTime");
selectRemove.innerHTML = "";
           
for (var option in dateData){
var newOption = document.createElement("option");
newOption.innerHTML = option;
selectRemove.options.add(newOption);
}

问题： 如何删除现有的 Select Options 并将其替换为函数的返回值？或者如何创建一个反映值的下拉列表框？

Answer 1

问题：

• 没有为任何调用的函数提供返回值。
• innetHtml 应该是 innerHTML

片段：

function testRow(dataDisable,lookDate){
  /*...rest of code*/
  var list1 = listVal.getValues();
  Logger.log(list1);
  return list1;//ADDED: returns to `timecheck`
  //REMOVEDdoGet(list1); 
}

function timeCheck(lookDate){
  /*...rest of code*/
  var dataDisable = CheckLimitReached(myVals);
  return testRow(dataDisable,lookDate);//MODIFIED return the value of function `testRow` from `timeCheck` to `dateOk`
}

function dateOk(dateData){
 console.log(dateData);
 document.getElementById("subTime").innerHTML = dateData.reduce((a,c)=>{
    return a+'<option>' + (c[0] === 'Not Available' ? '' : c[0]) + '</option>'
 },'');
}

阅读和练习：

• Functions

实时片段：

<div class="input-field col s4">
<select id="subTime">
   <option value="" disabled selected>Choose your preferred time</option>                  
 
</select>
<label>Select Time</label>
 </div> <!-- CLOSE TIME FIELD -->
<script>
function dateOk(dateData){
 console.log(dateData);
 document.getElementById("subTime").innerHTML = dateData.reduce((a,c)=>{
return a+'<option>' + (c[0] === 'Not Available' ? '' : c[0]) + '</option>'
 },'');
}
dateOk([["Not Available"], ["10:00AM"], ["5:00PM"]]);//call function as if called from successHandler
</script>