google apps script web app dynamic list from form

Question

I have a Google Apps Script web app that contains an HTML form with a couple of drop-down lists. When the user submits their choices, a function looks them up in a Google spreadsheet and returns corresponding values in an array. This array could have any length, and I am having trouble getting it to display as an HTML list without having a set list length.

I have this GAS script:

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;
}

And this 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>

(I've replaced some sections with "etc" to save space. The form itself is not the issue.)

Anyway, right now the app returns nothing. Earlier I had the printList function as:

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>';
  }

This version worked, but it was limited to 5 list slots, and the unused slots showed up as "undefined," which was annoying.

Does anyone have any suggestions? Was I close with the 'for' loop in my printList function? Is there another simple way to go about this? I would really appreciate any help or feedback.

Thanks, Bill

Answer 1

You get the div results do you mean to append the list to the 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 Also I think you need to getContents of the html Object.

You could not use the HTMLService . Personally I never got it to work the way I wanted it to when I used it. (a couple years ago).

Why not use your loop and just append the string to the div like this.

  <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

For whatever reason, it worked when I did it this way:

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