如何将Google Sheets指定范围值传递到Google Web App的datalist组件？

第一步：优化后端Apps Script（.gs）的itemsList函数 #

原函数返回的是二维嵌套数组，且未过滤空单元格，直接返回给前端会导致渲染异常，修正后的代码：

function itemsList() {
  const sheet = SpreadsheetApp.openById('1WeO8SyHj259jashQKXZ0WT_saSZHgk31yAQ1kZqiWpc').getSheetByName("Items");
  const lastRow = sheet.getLastRow();
  // 拍平二维数组、过滤空值，返回前端可直接使用的一维字符串数组
  const myList = sheet.getRange(1, 1, lastRow).getValues()
    .flat()
    .filter(item => item.toString().trim() !== '');
  return myList;
}

第二步：改造前端初始化脚本，替换硬编码数组 #

利用Google Web Apps内置的google.script.run异步API调用后端函数，把返回值赋值给原脚本中的myList变量，替换硬编码内容：

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const datalist = document.getElementById('wrkList');
    const fragment = document.createDocumentFragment();

    // 调用后端函数获取条目列表
    google.script.run
      .withSuccessHandler((myList) => {
        // 拿到返回值后执行原有渲染逻辑
        myList.forEach((wrk) => {
          const option = document.createElement('option');
          option.value = wrk;
          fragment.appendChild(option);
        })
        datalist.appendChild(fragment);
      })
      .withFailureHandler((err) => {
        console.error('条目列表加载失败：', err);
      })
      .itemsList();
  })
</script>

落地注意事项 #

• 确保Web Apps部署权限匹配：若目标Sheets和Web Apps不在同一账号下，需给Web Apps的运行身份开通对应Sheets的读取权限，否则会触发权限报错。
• 无需额外做序列化处理：google.script.run会自动完成前后端的数据格式转换，直接使用返回值即可。
• 原代码中手动创建文本节点的步骤可省略，给option.value赋值后浏览器会自动渲染对应选项文本，不影响功能效果。
• 脚本需等待DOM完全加载后再执行，避免出现找不到wrkList元素的报错。

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