TransWikia.com

Cannot append option for select form

Stack Overflow Asked by Nguyễn Vũ on November 20, 2021

I want to load option data from a Sheet and append to the select element, but I cannot set the global variable

var select_values = [];
google.script.run.withSuccessHandler(loadOpt).loadData("Test");


function loadOpt(data_arrar) {

    const arrayColumn = (arr, n) => arr.map(x => x[n]);

    select_values = arrayColumn(data_arrar, 1);
}

var opt = document.getElementById("select_opts");

for (i = 0; i < select_values.length; i++) {
    let option = document.createElement("option");
    option.value = i;
    option.text = select_values[i];

    opt.appendChild(option);
}

The result is nothing appended to [select_opts].

I’m update the code.gs.

var TestSheets = SpreadsheetApp.openById("XXX");


function doGet(e) {

  if (!e.parameter.page) {
    // When no specific page requested, return "home page"
    return HtmlService.createTemplateFromFile('Home').evaluate();
  }
  // else, use page parameter to pick an html file from the script
  return HtmlService.createTemplateFromFile(e.parameter['page']).evaluate();

}

function loadData(Sheetname) {

  var sheet = TestSheets.getSheetByName(Sheetname);

  var rows = sheet.getRange("A1").getValue();
  var Columns = sheet.getRange("B1").getValue();

  var data_return = [];

  for (var i = 0; i <= rows; i++) {
    data_return[i] = [];
    for (var j = 0; j <= Columns - 1; j++) {
      data_return[i][j] = sheet.getRange(i + 2, j + 1).getValue();
    }
  }

  return data_return;
}

Note that function loadData works well & has been tested.

google apps scriptgoogle sheets

One Answer

The problem is that Javascript code outside of functions will be called on loading of the HTML document

  • It will not be reevaluated after running code in functions
  • If you want your loop to run after function loadData(Sheetname) - you need to put the loop into another function that is called after the execution of function loadData(Sheetname)

Sample:

<!DOCTYPE html>
<html>
   <head>
      <base target="_top">
   </head>
   <body>
      <script>
         var select_values = [];
         google.script.run.withSuccessHandler(loadOpt).loadData("Test");         
         
         function loadOpt(data_arrar) {         
           const arrayColumn = (arr, n) => arr.map(x => x[n]);         
           select_values = arrayColumn(data_arrar, 1);
           console.log(" select_values: " + select_values);
           callLater();
         }

         console.log(" select_values in call outside: " + select_values);

         function callLater(){
           console.log(" select_values in callLater: " + select_values);
           var opt = document.getElementById("select_opts");
           for (i = 0; i < select_values.length; i++) {
             let option = document.createElement("option");
             option.value = i;
             option.text = select_values[i];
             opt.appendChild(option);
           }
         }
      </script>
   </body>
</html>

Answered by ziganotschka on November 20, 2021

Add your own answers!

Ask a Question

Get help from others!

Recent Questions

Recent Answers

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP