javascript - 以 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 应用程序中选择日期时，它将运行函数 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 中的值反射(reflect)为选项。

这是我的 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 -->

预先感谢您的回答和意见。

编辑/更新:

我已经在 J​​avaScript 中尝试了此代码来删除现有选项并将这些值添加为 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);
}

问题:如何删除现有的选择选项并将其替换为函数的返回值？或者如何创建一个反射(reflect)值的下拉列表框？

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>