Google Sheets自定义对话框返回数据类型及单元格写入异常问题

问题分析 #

1. 数据类型不匹配：前端提交的是键值对对象（Object），而非你预期的数组，但后端代码用数组索引data[i]取值，因此得到undefined，最终单元格显示undefined Vessels。
2. 验证函数错误：前端validateInput中，你已将input的value直接存入controls对象，却额外调用.value属性，导致验证逻辑永远不通过（若未触发验证则另当别论）。
3. 单元格范围错误：后端getRange(6,3,6+i)的参数写法错误，会导致每次选中的单元格范围逐行扩大，而非单个目标单元格。

修复方案 #

1. 修复前端验证逻辑 #

修正validateInput函数，直接判断controls中的值是否为空：

function setVesselCounts(){
  let controls = {}
  document.querySelectorAll("input[type=text]").forEach(input => controls[input.id] = input.value)
  validateInput(controls) ? google.script.run.withSuccessHandler(google.script.host.close).setVesselCounts(controls) : window.alert('Please Check Input')
}

function validateInput(controls){
  return (
    controls["LA/LB"] !== '' &&
    controls["Oakland"] !== '' &&
    controls["Tacoma"] !== '' &&
    controls["Seattle"] !== '' &&
    controls["Vancouver"] !== '' &&
    controls["Halifax"] !== '' &&
    controls["NY"] !== '' &&
    controls["Norfolk"] !== '' &&
    controls["Charleston"] !== '' &&
    controls["Savannah"] !== '' &&
    controls["Mobile"] !== '' &&
    controls["Houston"] !== ''
  )
}

2. 后端代码修复（二选一） #

方案A：将对象值转为数组写入（匹配前端input顺序）

function setVesselCounts(data){
  // 按前端input顺序提取值为数组
  const values = [
    data["LA/LB"],
    data["Oakland"],
    data["Tacoma"],
    data["Seattle"],
    data["Vancouver"],
    data["Halifax"],
    data["NY"],
    data["Norfolk"],
    data["Charleston"],
    data["Savannah"],
    data["Mobile"],
    data["Houston"]
  ];
  
  // 循环写入单个单元格，修复getRange参数
  for(let i = 0; i < values.length; i++){
    scs.getRange(6 + i, 3).setValue(`${values[i]} Vessels`);
  }
}

方案B：根据表格A列城市名匹配对象键（顺序更灵活）

function setVesselCounts(data){
  // 将A列的城市名转为一维数组
  let keys = scs.getRange(6,1,12,1).getDisplayValues().flat();
  for(var i = 0; i < keys.length; i++){
    const city = keys[i];
    // 处理"New York"对应id"NY"的特殊情况
    const value = data[city === "New York" ? "NY" : city];
    scs.getRange(6 + i, 3).setValue(`${value} Vessels`);
  }
}

3. 可选：改为提交数组（符合你最初预期） #

若想让前端提交数组而非对象，修改前端setVesselCounts函数：

function setVesselCounts(){
  // 按顺序收集input值为数组
  const values = [
    document.getElementById("LA/LB").value,
    document.getElementById("Oakland").value,
    document.getElementById("Tacoma").value,
    document.getElementById("Seattle").value,
    document.getElementById("Vancouver").value,
    document.getElementById("Halifax").value,
    document.getElementById("NY").value,
    document.getElementById("Norfolk").value,
    document.getElementById("Charleston").value,
    document.getElementById("Savannah").value,
    document.getElementById("Mobile").value,
    document.getElementById("Houston").value
  ];
  
  // 验证所有输入不为空
  const isValid = values.every(val => val !== '');
  isValid ? google.script.run.withSuccessHandler(google.script.host.close).setVesselCounts(values) : window.alert('Please Check Input')
}

此时后端可直接沿用你最初的数组索引取值逻辑（需同步修复getRange参数）。

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