google 来自表单的应用脚本网络应用动态列表

Question

我有一个 Google Apps 脚本网络应用程序，其中包含一个带有几个下拉列表的 HTML 表单。当用户提交他们的选择时，一个函数会在 Google 电子表格中查找它们，并在数组中查找 returns 对应的值。这个数组可以有任何长度，我无法在没有设置列表长度的情况下将其显示为 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" 替换了一些部分以保存 space。表格本身不是问题。）

无论如何，现在应用程序 returns 什么都没有。早些时候我将 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 个列表位置，未使用的位置显示为 "undefined,"，这很烦人。

有人有什么建议吗？我是否在 printList 函数中关闭了 'for' 循环？还有另一种简单的方法吗？如果有任何帮助或反馈，我将不胜感激。

谢谢，比尔

Answer 1

您得到了 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>

Answer 2

无论出于何种原因，当我这样做时它起作用了：

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

google 来自表单的应用脚本网络应用动态列表

google apps script web app dynamic list from form

javascript

html

dom

google-apps-script