Populate HTML form from Google Sheets

Question

I am fairly new to all this but am looking to populate an Apps Script Web App HTML dropdown form entry with names directly from a Google Spreadsheet. So far I have been able to

Answer 1

getColleagueList() should be a server side function. You can put it in Code.gs file. Then call the server side function from JavaScript as follow: You can learn more here: https://developers.google.com/apps-script/guides/html/communication

<script>
          function onSuccess(values) {
            var select = document.getElementById("selectColleague");
            var options = values[0]; //Two dimensional array
            for(var i = 0; i < options.length; i++) {
                var opt = options[i];
                var el = document.createElement("option");
                el.textContent = opt;
                el.value = opt;
                select.appendChild(el);
            }
          }

          google.script.run.withSuccessHandler(onSuccess)
              .getColleagueList();
</script>

Answer 2

@HariDas has given a great answer with the back-end .gs code and is all working fine. Your web app code is also fine it just has a little change to be made:

    var options = values[0]; 
    //change it to:
    var options = values;

This will now loop through the array and give all the results as seen here: Web App

Hope that helps :) Good luck!