Google Script网页应用表格无法填充问题求助

核心问题 #

代码存在两个关键不匹配：

1. 服务器端getRecords函数将Sheet数据转换为对象数组（每个行数据是包含表头键的对象），但前端populateTable函数错误地将其当作二维数组处理，遍历row.length（对象无length属性，导致循环不执行）。
2. 前端editRecord函数试图用数组索引（如selectedRecord[0]）访问对象属性，无法获取数据。

修复方案 #

方案1：修改前端代码适配对象数组（推荐） #

调整populateTable和editRecord函数，正确处理对象格式的记录：

// 修复后的populateTable函数
function populateTable(records) {
  console.log("Data received:", records);
  var tableBody = document.getElementById('jobTableBody');
  tableBody.innerHTML = '';

  if (records && records.length > 0) {
    // 定义表格列对应的属性名，和表头顺序一致
    const columns = [
      'Job Number', 'Street Address', 'City', 'Status Description',
      'Date Received', 'Due Date', 'Field Supervisor', 'Customer Supervisor',
      'Priority', 'Job Class', 'Contractor', 'Date Completed', 'Notes'
    ];
    
    for (var i = 0; i < records.length; i++) {
      var row = records[i];
      var newRow = tableBody.insertRow(-1);
      // 按列属性名遍历取值
      columns.forEach(col => {
        var newCell = newRow.insertCell(-1);
        newCell.textContent = row[col] || '';
      });
      var actionsCell = newRow.insertCell(-1);
      // 传递对象时注意转义，确保JSON格式正确
      actionsCell.innerHTML = `<button onclick="editRecord(${i}, '${JSON.stringify(row).replace(/'/g, "\\'")}')">Edit</button> <button onclick="deleteRecord(${i})">Delete</button>`;
    }
  } else {
    console.log("No records found.");
    var noRecordsRow = tableBody.insertRow(-1);
    var noRecordsCell = noRecordsRow.insertCell(-1);
    noRecordsCell.colSpan = 14; // 和表格实际列数匹配（13数据列+1操作列）
    noRecordsCell.textContent = "No records found.";
  }
}

// 修复后的editRecord函数
function editRecord(row, record) {
  var selectedRecord = JSON.parse(record);
  console.log("Edit button clicked. Row:", row, "Record:", selectedRecord);

  // 用对象属性名填充表单
  document.getElementById('jobNumber').value = selectedRecord['Job Number'] || '';
  document.getElementById('streetAddress').value = selectedRecord['Street Address'] || '';
  document.getElementById('city').value = selectedRecord['City'] || '';
  document.getElementById('statusDescription').value = selectedRecord['Status Description'] || '';
  document.getElementById('dateReceived').value = selectedRecord['Date Received'] || '';
  document.getElementById('dueDate').value = selectedRecord['Due Date'] || '';
  document.getElementById('fieldSupervisor').value = selectedRecord['Field Supervisor'] || '';
  document.getElementById('customerSupervisor').value = selectedRecord['Customer Supervisor'] || '';
  document.getElementById('priority').value = selectedRecord['Priority'] || '';
  document.getElementById('jobClass').value = selectedRecord['Job Class'] || '';
  document.getElementById('contractor').value = selectedRecord['Contractor'] || '';
  document.getElementById('dateCompleted').value = selectedRecord['Date Completed'] || '';
  document.getElementById('notes').value = selectedRecord['Notes'] || '';
}

方案2：修改服务器端返回二维数组 #

如果不想修改前端，可调整getRecords函数，直接返回去掉表头的二维数组：

function getRecords() {
  try {
    var sheet = SpreadsheetApp.openById('16b_cRhhtLSqZqGqZ3bwigHleOLNYQGhGB0FGkc8j7nk').getSheetByName('Data');

    if (!sheet) {
      Logger.log('Sheet not found');
      return [];
    }

    var dataRange = sheet.getDataRange();
    var values = dataRange.getValues();

    Logger.log('Values:', values);

    if (values.length <= 1) {
      Logger.log('No records found.');
      return [];
    }

    // 直接返回去掉表头的二维数组
    var records = values.slice(1);
    Logger.log('Retrieved records:', records);
    return records;
  } catch (error) {
    Logger.log('Error in getRecords:', error.message);
    return [];
  }
}

额外检查项 #

1. 确认Google Sheet的表头名称和前端columns数组里的属性名完全一致（大小写、空格都要匹配）。
2. 查看Google Script编辑器的日志（视图>日志），确认getRecords函数里的values和records是否正确获取到数据。
3. 确保网页应用的部署权限设置正确，允许访问者查看数据。

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