如何将Google Apps Script的code.gs中JSON数据填充到HTML下拉菜单

核心问题说明 #

你现有代码存在2个明显错误：

• 前端google.script.run调用的是get_people()，但服务端定义的函数名是getPeople()，命名不匹配导致调用失败
• 服务端getPeople()函数里缺少API请求逻辑，res变量未定义

以下是完整可运行的修正方案： #

修正后的code.gs代码 #

function getPeople() {
  // 补全你之前测试可用的API请求逻辑
  var url = '你的API请求地址';
  var res = UrlFetchApp.fetch(url, {'你之前测试可用的请求参数'});
  var json = res.getContentText();
  var txt = JSON.parse(json);

  var people = txt.data.map(function (a) { 
    return [a.firstName, a.lastName];
  });
  Logger.log(people);
  return people;
}

function showDialog() {
  var html = HtmlService.createTemplateFromFile("Page").evaluate();
  SpreadsheetApp.getUi().showModalDialog(html, "人员列表");
}

function onOpen() {
  SpreadsheetApp.getUi()
      .createMenu('选择人员')
      .addItem('打开选择器', 'showDialog')
      .addToUi();
}

修正后的Page.html代码 #

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
</head>
<body>
  <select id="droplist">
  </select>
  <script>
  (function () {
    google.script.run.withSuccessHandler(
      function(people) {
        var select = document.getElementById("droplist");
        // 清空原有选项，避免重复加载
        select.innerHTML = '';
        for(var dude of people) {
          var option = document.createElement("option");
          option.text = dude[0] + " " + dude[1];
          // 可按需设置option的value值，比如存储唯一标识
          // option.value = dude[0] + '-' + dude[1];
          select.add(option);
        }
      }
    // 调用的函数名要和服务端完全一致，修正为getPeople
    ).getPeople();
  }());
  </script>
</body>
</html>

测试步骤 #

1. 保存所有代码后，刷新Google表格页面，等待顶部自定义菜单选择人员加载完成
2. 点击菜单中的打开选择器，首次运行需要授权脚本权限，授权后即可看到下拉框自动填充人员列表

调试提示 #

如果下拉框没有正常加载内容，可按以下步骤排查：

• 单独运行服务端的getPeople函数，查看Logger输出的people数组是否正常
• 打开弹窗后按F12打开浏览器控制台，查看是否有报错信息，也可在successHandler中添加console.log(people)确认前端是否成功接收到服务端返回的数据

内容的提问来源于stack exchange，提问作者Roni