如何显示电子表格中的数据?它显示“未定义”

问题描述 投票:0回答:1

现在已经检查了半天多了。我现在完全空白了!我不知道我在哪里遗漏了什么?请帮我。我的 .gs 代码(Google Script)如下

function readRecords() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(SHEET_NAME);
  const data = sheet.getDataRange().getValues();
  const headers = data[0];
  return data.slice(1).map(row => {
    return headers.reduce((record, header, idx) => ({ ...record, [header]: row[idx] }), {});
  });
}

我的 HTML 代码:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <title>Show Records</title>
  </head>
  <body>
    <div id="recordsContainer"></div>

    <script>
      function displayRecords(records) {
        const container = document.getElementById('recordsContainer');
        container.innerHTML = '';
        if (records.length === 0) {
          container.innerHTML = '<p>No records found.</p>';
          return;
        }

        const table = document.createElement('table');
        table.classList.add('table');
        const thead = table.createTHead();
        const row = thead.insertRow();
        Object.keys(records[0]).forEach(header => {
          const th = document.createElement('th');
          th.textContent = header;
          row.appendChild(th);
        });

        const tbody = table.createTBody();
        records.forEach(record => {
          const row = tbody.insertRow();
          Object.values(record).forEach(value => {
            const td = row.insertCell();
            td.textContent = value;
          });
        });

        container.appendChild(table);
      }

      function fetchRecords() {
        google.script.run.withSuccessHandler(displayRecords).readRecords();
      }

      window.onload = fetchRecords;
    </script>
  </body>
</html>

我的问题出在哪里以及我错过了什么?请帮助我:

显示“未定义”的图像 i add some picture that show

控制台

consle.log(Records)

enter image description here

html google-sheets google-apps-script web-applications
1个回答
0
投票

您可以像这样获取谷歌电子表格数据,需要添加您的电子表格ID,范围和apiKey。

您的电子表格 ID 是出现在 URL 中“d/”之后的一长串数字。 范围类似于 A3:D 或工作表名称!A1:A3。 您可以从 https://console.cloud.google.com/apis/dashboard 获取 apiLey。

 async function fetchSheetData() {
 const url = `https://sheets.googleapis.com/v4/spreadsheets/${spreadsheetId}/values/${range}?       key=${apiKey}`;
 
   try {
        const response = await fetch(url);
          if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
         const data = await response.json();
         
          catch (error) {
        console.error("Error fetching data:", error);
      }
    }

© www.soinside.com 2019 - 2024. All rights reserved.