如何将Google Apps Script循环与HTML页面关联？

原代码核心问题 #

• doGet()函数循环内直接执行return，导致循环仅运行一次就终止，无法收集所有问题数据
• 未将问题列表传递给HTML模板，HTML中的test、questions变量无定义，模板无法读取数据
• 循环索引处理冗余，无需额外+1，直接从数据行开始遍历即可

修正后的Apps Script代码 #

const name = "Name";

function doGet() {
  const ws = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1");
  const range_in_q = ws.getRange("A1:E" + ws.getLastRow()).getValues();
  // 跳过表头行，提取所有问题内容
  const questionsList = range_in_q.slice(1).map(row => row[0]);
  
  // 将数据注入HTML模板
  const template = HtmlService.createTemplateFromFile('index');
  template.questions = questionsList;
  template.name = name;
  
  return template.evaluate();
}

function includeExternalFile(filename) {
  return HtmlService.createTemplateFromFile(filename).getContent();
}

修正后的HTML代码 #

<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1><?= name ?></h1>
    <!-- 遍历问题列表生成标题 -->
    <? for (let question of questions) { ?>
      <h2><?= question ?></h2>
    <? } ?>
    <h1>This page was served through HtmlService!</h1>
  </body>
</html>

关键改动说明 #

1. 数据收集优化：用slice(1)跳过表头行，map方法提取每行第1列的问题内容，生成完整的问题数组
2. 模板传值：将问题数组和name变量赋值给模板对象，让HTML模板能直接访问这些数据
3. HTML循环简化：用for...of遍历问题数组，直接输出每个问题作为标题（改用<h2>区分层级，可按需调整标签）
4. 冗余代码清理：删除原代码中无意义的typeof(Logger.log(...))语句，简化逻辑

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