Google Sheet API v4更新后使用json.feed.entry追加数据失效求助

问题核心原因 #

• 你当前使用的json.feed.entry、gsx$xxx字段是v3版本API的返回结构，v4版本已完全废弃该结构，强行取值会直接报错
• API密钥仅支持公开表格的只读操作，写入数据必须通过OAuth2授权获取对应表格的编辑权限
• 你当前的代码仅实现了数据读取逻辑，没有调用v4对应的追加数据接口

读取逻辑修正代码 #

let sheetNumber = "Sheet1";
// 仅公开表格可使用API密钥读取，非公开表格需要OAuth授权
let sheetUrl = `https://sheets.googleapis.com/v4/spreadsheets/${HanearkId}/values/${sheetNumber}?key=你的API密钥`

fetch(sheetUrl)
  .then(function (response) {
    return response.json();
  })
  .then(function (json) {
    // v4返回的行数据存在values字段，第一个元素为表头
    const headers = json.values[0]
    // 把数组格式转成和旧版类似的对象格式，适配原有渲染逻辑
    const menus = json.values.slice(1).map(row => {
      let rowObj = {}
      headers.forEach((header, index) => {
        rowObj[`gsx$${header.toLowerCase().replace(/\s+/g, '')}`] = {$t: row[index] || ''}
      })
      return rowObj
    })
    appendMenus(menus);
  });

/*
将json数据追加到DOM
*/
function appendMenus(menus) {
  let htmlTemplate = "";
  for (let menu of menus) {
    htmlTemplate += `

    <table>
      <tbody>
        <tr>
          <td class="td1">${menu['gsx$nr.']['$t']}.</td>
          <td class="td2">${menu['gsx$bryggeri']['$t']}</td>
          <td class="td3">${menu['gsx$ølnavn']['$t']}</td>
          <td class="td4">${menu['gsx$ølkat.']['$t']}</td>
          <td class="td5">${menu['gsx$alk.']['$t']}</td>
          <td class="td6">${menu['gsx$beskrivelse']['$t']}</td>
          <td class="td7">${menu['gsx$pris']['$t']} kr</td>
      </tr>
    </tbody>
  </table>
      `;
  }
  document.querySelector("#menus").innerHTML += htmlTemplate;
}

数据追加实现步骤 #

1. 先在Google Cloud控制台开启Sheets API，配置OAuth2客户端ID，申请https://www.googleapis.com/auth/spreadsheets授权范围
2. 调用append接口写入数据，示例代码如下：

// accessToken为OAuth授权后获取的令牌，对应账号必须有表格编辑权限
function appendData(sheetId, sheetName, newRow) {
  const appendUrl = `https://sheets.googleapis.com/v4/spreadsheets/${sheetId}/values/${sheetName}!A:G:append?valueInputOption=USER_ENTERED`
  fetch(appendUrl, {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${accessToken}`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      values: [newRow]
    })
  }).then(res => res.json())
  .then(result => {
    console.log('追加成功', result)
  })
}

// 调用示例：按顺序传入一行7列的数据，对应你表格的7个字段
appendData(HanearkId, "Sheet1", ["2", "测试酒厂", "测试啤酒名", "艾尔", "5.2", "淡口果香", "50"])

注意事项 #

• 追加数据前请确认授权账号拥有对应表格的编辑权限
• valueInputOption为必填参数，USER_ENTERED模式会自动解析公式、日期等格式，RAW模式为纯文本写入

内容的提问来源于stack exchange，提问作者J. P.