谷歌应用程序脚本web应用程序动态列表从表单

google apps script web app dynamic list from form

本文关键字：应用程序 表单 列表 web 脚本 谷歌 动态      更新时间：2024-05-29

我有一个Google Apps Script web应用程序，它包含一个带有几个下拉列表的HTML表单。当用户提交他们的选择时，函数会在谷歌电子表格中查找它们，并在数组中返回相应的值。这个数组可以有任何长度，我很难在没有设置列表长度的情况下将其显示为HTML列表。

我有这个GAS脚本：

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
function discern(formObject) {
  var stage = formObject.stage;
  var service = formObject.service;
  var ss = SpreadsheetApp.openById(ID);
  var dataSheet = ss.getSheetByName('Sheet1');
  var dataRange = dataSheet.getDataRange();
  var data = dataRange.getValues();
  var array = [];
  for(var i = 0; i < data.length; i++) {
    if(data[i][1].indexOf(stage) > -1) {
      if(data[i][2].indexOf(service) > -1) {
        array.push(data[i][0]);
      }
    }
  }
  return array;
}

这个HTML:

<script>
  function printList(array) {
    var div = document.getElementById('results');
    var list = HtmlService.createHtmlOutput('<ul>');
    for (var i = 0; i < array.length; i++) {
      list.append('<li>' + array[i] + '</li>');
    }
    list.append('</ul>');  
  }
</script>
<form id="myForm">
  <h3>Farming Stage</h3><br>
  Select your farming stage.<br>
  <select name="stage">
  <option etc etc etc
  </select><br>
  <h3>Services</h3><br>
  Select the service for which you are looking<br>
  <select name="service">
  <option value= etc etc etc</option>
  </select><br>
  <br><input type="button" value="Discern"
      onclick="google.script.run
          .withSuccessHandler(printList)
          .discern(this.parentNode)"/>
</form>
<ul id="results"></ul>

（为了节省空间，我用"etc"替换了一些部分。表单本身不是问题所在。）

不管怎样，现在应用程序什么都不返回。早些时候，我的printList功能是：

function printList(array) {
    var div = document.getElementById('output');
    div.innerHTML =
    '<ul><li>' + array[0] + 
    '</li><li>' + array[1] + 
    '</li><li>' + array[2] + 
    '</li><li>' + array[3] + 
    '</li><li>' + array[4] + 
    '</li></ul>';
  }

这个版本有效，但它仅限于5个列表插槽，未使用的插槽显示为"未定义"，这很烦人。

有人有什么建议吗？我的printList函数中的"for"循环结束了吗？还有其他简单的方法吗？如果有任何帮助或反馈，我将不胜感激。

谢谢，票据

如果得到div results，您的意思是将列表附加到html中吗？

<script>
  function printList(array) {
    var div = document.getElementById('results');
    var list = HtmlService.createHtmlOutput('<ul>');
    for (var i = 0; i < array.length; i++) {
      list.append('<li>' + array[i] + '</li>');
    }
    list.append('</ul>');  
    // ? 
    div.innerHTML = list.getContent();
  }
</script>

edit此外，我认为您需要getContents的html对象。

您无法使用HTMLService。就我个人而言，当我使用它的时候，我从来没有让它按我想要的方式工作。（几年前）。

为什么不使用循环并像这样将字符串附加到div中呢。

  <script>
      function printList(array) {
        var div = document.getElementById('results');
        var list = '<ul>');
        for (var i = 0; i < array.length; i++) {
          list += '<li>' + array[i] + '</li>';
        }
        list += '</ul>';  
        div.innerHTML = list;
      }
    </script>

无论出于什么原因，当我这样做时，它都是有效的：

...<br><input type="button" value="Discern"
      onclick="google.script.run
          .withSuccessHandler(showThings)
          .discern(this.parentNode)"/>
</form>
<p>List of services:</p>
<ul id="things">
    <li>Waiting...</li>
</ul>
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
function showThings(array) {
  var list = $('#things');
  list.empty();
  for (var i = 0; i < array.length; i++) {
    list.append('<li>' + array[i] + '</li>');
  }
}
</script>
相关文章：