使用Google表格中的數據填充選擇框

Question

我有一個Google網站，當前正在使用以下腳本，用作為數據庫的Google表格中的數據填充選擇框：

<? var stringified = getData(); ?>
<?var data = JSON.parse(stringified)?>
    <select size="10" id="userChoice">
      <? for (var i = 0; i < data.length; i++) { ?>
       <option>
            <?= data[i] ?>
          <? } ?>
</select>

這將裝入帶有選擇框的頁面，該選擇框填充有數據庫中的每個條目。 我想知道這是否是最好的方法。 我真正想做的是使選擇框的內容更具動態性。

我寫了一個腳本（按日期）篩選Google表格的內容，但我不太想知道如何在上面的選擇框中顯示這些篩選結果。 我已經嘗試了幾種可能的解決方案，但是一直在與它們碰壁。 下面是客戶端將日期傳遞到服務器端的函數（請注意，我發現以下腳本中的任何內容都不會將數據傳遞回選擇框。這只是顯示我如何過濾數據）：

//Takes the dates that were entered into the first two date pickers and sends them over to the server side stringified. The server side then uses these dates to filter out jobs not within the given time period.
function dateFilter(){
var date = {};

//dates pusehd into array
date[0] = document.getElementById("startDate").value;
date[1] = document.getElementById("endDate").value;

//array stringified
var dates = JSON.stringify(date);//Convert object to string

google.script.run
  .getData2(dates);

然后是在服務器端通過數據庫過濾的代碼：

function getData2(dates) {
  var ss = SpreadsheetApp.openById('1emoXWjdvVmudPVb-ZvFbvnP-np_hPExvQdY-2tOcgi4').getSheetByName("Sheet1");
  var date = JSON.parse(dates);
  var dateArray = [];

  for (var k in date) {//Loop through every property in the object
    var thisValue = date[k];//
      dateArray.push(thisValue);
  };
  var startDate = Date.parse(dateArray[0]);
  var endDate = Date.parse(dateArray[1]);
  var jobReference = [];
  var job;
  var dateCell1;
  var dateCell;

  if ((startDate==NaN) || (endDate==NaN)){

    for (var i = 2; job!=""; i++){
    job = ss.getRange(i,43).getValue();
    jobReference.push(job);
  };
  }

  else{
  for (var i = 2; job!=""; i++){
   dateCell1 = ss.getRange(i,3).getValue();
   dateCell = Date.parse(dateCell1);
    if (startDate<=dateCell&&endDate>=dateCell){
    job = ss.getRange(i,43).getValue();
    jobReference.push(job);
      Logger.log("here it is"+jobReference);
    }
          else{

          }
    }

  };

  var jR = JSON.stringify(jobReference);
        return jR;
}

現在，我嘗試了幾件事，讓成功處理程序更改行<? var stringified = getData();?> <? var stringified = getData();?>使用getData2似乎不起作用（它對我大喊我試圖解析的變量在服務器端未定義）。 因此，我嘗試將if / else放入其中，僅當變量為！=到undefined時才進行解析，但這也不起作用。 任何建議，將不勝感激。

Answer 1

我想到了！ 這是功能性的，但可能不是最佳做法，因此，如果有人有任何輸入，請隨時輸入。

因此，我在選擇框的客戶端的第一部分代碼保持不變。

接下來，我將日期發送到服務器端的位置更改為：

function dateFilter(){
var sdate = document.getElementById("startDate").value;
var edate = document.getElementById("endDate").value;

google.script.run.withSuccessHandler(dateSuccess)
  .getData2(sdate,edate);

}

因此，由於只有兩個變量，所以我取出了將其推入數組的部分。 這樣就消除了在服務器端進行解析並因此具有未定義變量的問題。 我還添加了成功處理程序。

服務器端代碼基本上保持不變，但是我確實稍微更改了for循環。 我沒有讓它遍歷數據庫直到在特定列中找到一個空白單元格，而是添加了var last = ss.getLastRow(); 並且讓它循環直到i<= last 。 這樣可以避免代碼超時。

接下來，我添加了用於成功處理程序的函數：

function dateSuccess(jobs){
document.getElementById('userChoice').options.length = 0;

var data = JSON.parse(jobs)

for (var i = 0; i < data.length; i++) {
          var option = document.createElement("option");
option.text = data[i]
var select = document.getElementById("userChoice");
select.appendChild(option);

         } 
}

奇跡般有效！

Answer 2

小腳本，即<? ?> 當使用execute函數創建頁面時， <? ?>被編譯並運行。 它們不是用於動態修改網頁。 要基於服務器返回的數據（在本例中為getData（））修改選項。 你會做這樣的事情

首先，您將google.script設置為在成功時調用ModifyOptions函數

google.script.run.withSuccessHandler(modifyOptions)
  .getData2(dates);

上面的代碼將自動將getData2的返回值即Jr值傳遞給ModifyOptions函數

    function modifyOptions(jobReference){
    var selOpt = document.getElementById("userChoice")
    selOpt.innerHTML =""                      // Remove previous options
    var options = ""              
    var data = JSON.parse(jobReference)
       for (var i = 0; i < data.length; i++) {
         options += "<option>"+data[i] +</option>   //New string of options based on returned data
       }

    selOpt.innerHTML = options                //Set new options

}

您可以在此處找到如何修改javascript中的select-option的有效示例

希望有幫助！