将 2 个参数传递给 .withSuccessHandler()

Question

我有下面的代码，它读取 2 张表格中的数据，country 和 vendor 并为每个表格构建下拉列表。

我想尝试使用类似的方法将它们合并到一个函数中：

var lists = ["country", "vendor"];
lists.forEach()
// or
// for list in lists {}

但坚持使用 .withSuccessHandler()我如何才能将 2 个输入传递给它，例如 list 和 list values？

<script>
  function createCountryDropdown() {
      //SUBMIT YOUR DATA RANGE FOR DROPDOWN AS THE PARAMETER
      google.script.run
        .withFailureHandler(onFailure)
        .withSuccessHandler(countryDropDown)
        .getDropdownList("country");

      google.script.run
        .withFailureHandler(onFailure)
        .withSuccessHandler(vendorDropDown)
        .getDropdownList("vendor");
  }
  function onFailure(err) {
      alert('There was an error!' + err.message);
  }
  //POPULATE COUNTRY DROPDOWNS
  function countryDropDown(values) { //Ref: https://stackoverflow.com/a/53771955/2391195
    var list = document.getElementById('country');   
    for (var i = 0; i < values.length; i++) {
      var option = document.createElement("option");
     // console.log(value[i])
      option.value = values[i];
      option.text = values[i];
      list.appendChild(option);
    }
  }

    //POPULATE Vendor DROPDOWNS
  function vendorDropDown(values) { //Ref: https://stackoverflow.com/a/53771955/2391195
    var list = document.getElementById('vendor');   
    for (var i = 0; i < values.length; i++) {
      var option = document.createElement("option");
     // console.log(value[i])
      option.value = values[i];
      option.text = values[i];
      list.appendChild(option);
    }
  }
</script>

有什么帮助吗？

Answer 1

我相信你的目标如下。

您想将 2 个google.script.run 组合成一个函数，如下所示。

var lists = ["country", "vendor"];
lists.forEach()

修改点：

• 一开始我觉得你的countryDropDown和vendorDropDown可以用一个函数写出来。
• 我认为可以使用var lists = ["country", "vendor"]; 在 Google Apps 脚本端通过一次调用来检索这些值。 Marios's answer 已经提到了这一点。

当以上几点反映到您的脚本中时，它变成如下。并且，修改后的脚本流程如下。

1. 使用google.script.run 和var lists = ["country", "vendor"] 调用getDropdownLists。
2. 在 Google Apps 脚本端，值是从 getDropdownList（您的脚本）和 ["country", "vendor"] 使用循环检索的。
3. 使用从getDropdownList 检索到的值，使用createDropDown 创建下拉列表。

修改后的脚本：

JavaScript 端：

// I modified this function.
function createCountryDropdown() {
  var lists = ["country", "vendor"];
  google.script.run
    .withFailureHandler(onFailure)
    .withSuccessHandler(createDropDown)
    .getDropdownLists(lists);
}

function onFailure(err) {
    alert('There was an error!' + err.message);
}

// I prepared this function.
function createDropDown(obj) { //Ref: https://stackoverflow.com/a/53771955/2391195
  obj.forEach(({id, values}) => {
    var list = document.getElementById(id);
    for (var i = 0; i < values.length; i++) {
      var option = document.createElement("option");
      option.value = values[i];
      option.text = values[i];
      list.appendChild(option);
    }
  });
}

Google Apps 脚本方面：

请添加以下功能。这个函数是从 Javascript 端调用的。

function getDropdownLists(e) {
  return e.map(f => ({id: f, values: getDropdownList(f)}));
}

注意：

当然，您可以在循环中使用google.script.run。但我担心在这种情况下，工艺成本会高于上述方向。

Answer 2

解释：

您可以将{ country, vendor } 形式的对象作为函数参数。

为了使代码更短，我使用了arrow functions，但如果您愿意，请随意使用您自己的版本。

同样，服务端函数getDropdownList需要返回一个相同形式的对象，供withSuccessHandler内部的函数使用：

return { country: country_values, vendor: vendor_values };

解决方案：

将您的客户端功能更改为：

function createCountryDropdown() { 
    google.script.run
      .withFailureHandler(onFailure)
      .withSuccessHandler(({ country, vendor }) => {
         var listCountry = document.getElementById('country');
         var listVendor = document.getElementById('vendor');
         
         for (var i = 0; i < country.length; i++) {
            var option = document.createElement("option");     
            option.value = country[i];
            option.text = country[i];
            listCountry.appendChild(option);
         }
                            
         for (var j = 0; j < vendor.length; j++) {
            var option = document.createElement("option");     
            option.value = vendor[j];
            option.text = vendor[j];
            listVendor.appendChild(option);
         }         
      })
      .getDropdownList();
} 

将您的服务器端功能更改为：

function getDropdownList() { 
  // some code to get country_values
  // some code to get vendor_values                            
  return { country: country_values, vendor: vendor_values };
}

您现在可以删除函数countryDropDown 和vendorDropDown，因为withSuccessHandler 不再使用它们。