Chrome扩展中基于ID更新Google Sheets指定行的问题求助

我正在开发一款Chrome扩展，将Google Sheets作为数据库使用，已实现数据创建与查询功能，但在更新功能上遇到问题。

现有查询与数据处理代码 #

let init = {
  method: 'GET',
  async: true,
  headers: {
    Authorization: 'Bearer ' + token,
    'Content-Type': 'application/json'
  },
  'contentType': 'json'
};
fetch(
  "https://sheets.googleapis.com/v4/spreadsheets/{spreadsheet_ID}/values/All Escalations!A5:Z10000001",
  init)

  .then((data) => {
    return data.json();
  }).then ((completedata) => {
    const numRows = completedata.values ? completedata.values.length: 0
    console.log(`${numRows} rows retrieved`)
   let source = completedata.values;
    const input = source.filter(function (row, index) {
      row.unshift(index);
      return row;
    }).filter(function (iRow) {
            return iRow[1] === arcaseiddis;
        });
    var index = (input[1]) ; // 错误根源
    let arjira2 = document.getElementById('jiracard').value
    let ardatesubmitteddis2 = document.getElementById('datesubmitted').value
    let arsubmittedbydis2 = document.getElementById('submittedbyaredit').value
    let arclientiddis2 = document.getElementById('clientidaredit').value
    let arcasenumberdis2 = document.getElementById('casenoaredit').value
    let arnotesdis2 = document.getElementById('notesaredit').value
    let arstatusdis2 = document.getElementById('statusaredit').value
    let arissuedis2 = document.getElementById('casedesaredit').value
    let arassignedtodis2 = document.getElementById('assignedtoaredit').value
    let datearcompleted = document.getElementById('datecompletearedit').value

    let arcaseiddis2 = e.target.parentElement.dataset.id
    input[0]= arcaseiddis2; // 更新行数据
    input[1] = arcasenumberdis2;
    input[2]= arjira2;
    input[3]= arstatusdis2;
    input[4]= arissuedis2;
    input[5]= arclientiddis2;
    input[6]= ardatesubmitteddis2;
    input[7]= arsubmittedbydis2;
    input[8]= arassignedtodis2
    input[9]= datearcompleted
    input[10]= arnotesdis2

    let values = [
      [
        input[0],
        input[1],
        input[2],
        input[3],
        input[4],
        input[5],
        input[6],
        input[7],
        input[8],
        input[9],
        input[10]
      ]
    ];

    const resource = {
        values
    };

    console.log(values)
    // 此处调用更新函数

错误信息 #

执行更新时控制台输出的错误内容：

{
  "range": "All Escalations!Aundefined:Jundefined",
  "values": {
    "values": [
      [
        "82389566743686",
        "4306203",
        "None",
        "SUBMITTED",
        "Testing",
        "Client",
        "2/8/2023",
        "John Smith",
        "Carey Jones",
        "",
        "No Notes Yet"
      ]
    ]
  }
}

现有更新函数代码 #

var payload = {
  "range": "All Escalations!A" + index + ":J" + index,
  "values": resource
}
let init = {
  method: 'PUT',
  async: true,
  headers: {
    Authorization: 'Bearer ' + token,
  },
  body: JSON.stringify(payload)
};
fetch(
    "https://sheets.googleapis.com/v4/spreadsheets/{SpreadsheetID}/values/All Escalations/?valueInputOption=USER_ENTERED",
    init)

问题分析与修复方案 #

1. index 变量未正确获取 #

• 原代码中var index = (input[1])错误：input是filter返回的匹配行数组，匹配到的行是input[0]，input[1]不存在，导致index为undefined。
• 之前的代码给每一行执行了unshift(index)，把原数组的索引（从0开始）加到了行的第0位，因此正确索引应为input[0][0]。
• 由于GET请求从表格第5行（A5）开始读取，原数组索引0对应表格行5，需加5得到实际表格行号：var index = input[0][0] + 5;

2. Payload 格式错误 #

• Sheets API要求values字段是二维数组，原代码把resource（已包含values字段的对象）赋值给payload.values，导致嵌套两层values，不符合API要求。
• 直接使用之前定义的values二维数组即可。

3. Fetch 请求URL与Headers问题 #

• 更新URL需指定具体range，原URL的All Escalations/?格式错误。
• Headers缺少Content-Type: application/json，需添加以正确解析JSON请求体。

修正后的完整更新代码片段 #

// 修正索引获取
var index = input[0][0] + 5; // 原数组索引+5对应表格实际行号

// 修正payload格式
var payload = {
  "values": values // 直接使用二维数组
};

let init = {
  method: 'PUT',
  async: true,
  headers: {
    Authorization: 'Bearer ' + token,
    'Content-Type': 'application/json' // 新增Content-Type
  },
  body: JSON.stringify(payload)
};

// 修正URL，指定具体range
fetch(
  `https://sheets.googleapis.com/v4/spreadsheets/{SpreadsheetID}/values/All Escalations!A${index}:J${index}?valueInputOption=USER_ENTERED`,
  init
)
.then(response => response.json())
.then(result => console.log('更新成功:', result))
.catch(error => console.error('更新失败:', error));

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