从谷歌表

Question

填充带有数据选择框我有一个谷歌的网站，我目前使用下面的脚本来填充我的选择框从谷歌片是作为我的数据库中的数据：

<? 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> 

这使用填充数据库中每个条目的选择框加载页面。我想知道这是否是最好的方法。我真正想要做的是让选择框的内容更具动态性。

我写了一个脚本来过滤（通过日期）谷歌表的内容，但我无法弄清楚如何让这些过滤结果显示在上面的选择框中。我尝试了几种可能的解决方案，但不断跟他们打路障。下面是将客户端传递给服务器端的函数（注意我在下面的脚本中没有意识到将数据传递回选择框，这只是为了说明我是如何过滤数据的）：

//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();?>使用getData2没有按” t似乎工作（它喊我，我试图解析的变量是未定义在服务器端）。所以我试着把一个if/else放进去，如果这个变量是！=未定义的，那么它只会解析它，那也行不通。任何建议，将不胜感激。

Answer 1

我想通了！这是功能性的，但也许不是最佳实践，所以如果有人有任何输入，随时可以加入。

因此，客户端的代码在选择框中的第一位保持不变。

下位，在这里我过到服务器端发送的日期改为这样：

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

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

} 

所以，因为它只有两个变量我拿出它推到一个数组的部分。这消除了服务器端的解析问题，因此具有未定义的变量。我还添加了一个成功处理程序。

服务器端代码留下基本上是相同的，但是我确实改变了对循环咯。相反，有它遍历数据库，直到它找到了一个空白单元格在一个特定列的，我加了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（）中修改。你会做这样的事

首先您将谷歌。脚本调用成功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中选择选项here

希望帮助！