从 Google 表格中提取数据并显示在 HTML H3 标记中答案

【问题标题】：Pull Data from Google Sheets and display in HTML H3 tag从 Google 表格中提取数据并显示在 HTML H3 标记中
【发布时间】：2021-08-27 00:37:01
【问题描述】：

我正在尝试从 Google 表格中提取数据并显示在具有特定 ID 的 H3 标记中。这是我的Google Sheet 的链接。我只想从该表中提取价格并显示在 H3 标签中。我怎样才能做到这一点？

代码.gs

function doGet() {
var temp = HtmlService.createTemplateFromFile('index');
temp.list = getValues();
return temp.evaluate();
}

function getValues() {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var ws = ss.getSheetByName('Sheet1');
var lastRow = ws.getLastRow();
var numRow = lastRow - 1;
return ws.getRange(2,1,numRow,2).getValues();
}

HTML

    <!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>50-74 gallons: </h1><h3 id="firstPrice"></h3>
    <h1>74-99 gallons: </h1><h3 id="secondPrice"></h3>
    <h1>100-124 gallons: </h1><h3 id="thirdPrice"></h3>
  </body>
</html>

【问题讨论】：

标签： google-apps-script google-sheets google-sheets-api spreadsheet

【解决方案1】：

由于您已经在模板变量 (list) 中有工作表值，请遍历该变量，考虑到它是一个二维数组并且每个内部数组有两个元素，分别对应于 Gallons 和 @987654328 @：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <? for(var i=0; i<list.length; i++){ ?>
      <h1><?= list[i][0] ?></h1>
      <h3 id=<?= `price_${i+1}` ?>><?= list[i][1] ?></h3>
    <? } ?>
  </body>
</html>

如果您希望每个h3 都有一个代表索引的id（如您所写的firstPrice），您可以将循环索引添加到每个id，例如上面的sn-p ：

id=<?= `price_${i+1}` ?>

重要提示：

请注意，这仅适用于Apps Script web apps。语法<?= ?> 是专门为 Apps 脚本设计的，如果您在其他环境中尝试，它将无法正常工作。见scriptlets。

编辑：

如果您不想使用循环，而是手动编写 HTML 元素，您可以这样做：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1><?= list[0][0] ?></h1><h3 id="firstPrice"><?= list[0][1] ?></h3>
    <h1><?= list[1][0] ?></h1><h3 id="secondPrice"><?= list[1][1] ?></h3>
    <h1><?= list[2][0] ?></h1><h3 id="thirdPrice"><?= list[2][1] ?></h3>
  </body>
</html>

【讨论】：

对不起，如果我不能完美地阐述我的担忧。但基本上我只想从单元格 B2 中获取数据，比如说 $3.09 并在
{{here}}
之间显示另外，我相信下面的脚本应该可以连接电子表格？但它在 Google Chrome 控制台中给了我错误：net::ERR_ABORTED 404
@Obaid 这就是这个答案的作用，从 B2 列获取数据并将其显示在不同的 h3 中。你能澄清一下吗？你试过这个代码吗？这怎么不适合你？
我不确定为什么它不起作用。这是 JSfiddle：jsfiddle.net/sh_obaid/40mpdyrh/4
@Obaid 当然，如果你用纯 JS 尝试它是行不通的。模板语法 (<?= ?>) 专门用于 Apps Script。您必须在Apps Script web app 中尝试。我在回答中添加了一条注释来解释这一点。
对不起，我的错。但是，它列出了工作表中的所有数据。我只想在特定的 h3 id 中显示价格。例如，
这应该只显示来自 B2 的数据，而
这应该只显示来自 B3 的数据。另外，因为它在 WebApp 上工作。如何将它集成到我的 Wordpress 网站中？

重要提示：

编辑：

{{here}}