使用 3 个选择列表中的选项从 Google 站点中的 Google 表格返回表格答案

【问题标题】：Return Table from Google Sheets in Google Sites Using Options from 3 Select Lists使用 3 个选择列表中的选项从 Google 站点中的 Google 表格返回表格
【发布时间】：2019-01-25 14:48:37
【问题描述】：

我有一个 Google 表格，我想让用户通过在选择列表中选择三个选项来在 Google 站点中进行查询，并让它以表格的形式返回结果。

我的工作表是here。

我尝试了一些 setQuery 示例，但运气不佳，因为几乎所有示例都返回了我不想要的图表，只是我的工作表中的表格。下面是我嵌入到我的谷歌网站的内容（减去 CSS）。 text() 函数只是一个测试，以确保我捕捉到人们的选择。所以你会看到这段代码在脚本中还没有谷歌函数，这就是我所缺少的。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Search For Your Zodiac Twin</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script src="https://www.gstatic.com/charts/loader.js"></script>
  <script>
    function text(){
      var s = document.getElementsByName('sun')[0];
      var stext = s.options[s.selectedIndex].text;
      var m = document.getElementsByName('moon')[0];
      var mtext = m.options[m.selectedIndex].text;
      var r = document.getElementsByName('rising')[0];
      var rtext = r.options[r.selectedIndex].text;
      document.getElementById("resulttext").innerHTML='Instagram users who match your signs are:';
      document.getElementById("resulttable").innerHTML='Your sun sign is ' + stext + ', your moon is ' + mtext + ', and your rising is ' + rtext;
    }
  </script>

</head>

<body>
  <div class="container">
    <form action="">
      <div class="form-group">
        <label for="sun" style="color: #ffc107ff">Sun</label>
        <br>
        <select name="sun" class="form-control-sun" id="sun">
          <option value="" selected disabled hidden>Choose Your Sun</option>
          <option value="Aquarius">Aquarius</option>
          <option value="Aries">Aries</option>
          <option value="Cancer">Cancer</option>
          <option value="Capricorn">Capricorn</option>
          <option value="Gemini">Gemini</option>
          <option value="Leo">Leo</option>
          <option value="Libra">Libra</option>
          <option value="Pisces">Pisces</option>
          <option value="Sagittarius">Sagitarrius</option>
          <option value="Scorpio">Scorpio</option>
          <option value="Tarus">Taurus</option>
          <option value="Virgo">Virgo</option>
        </select>
        <br>
        <label for="moon" style="color: #2196f3ff">Moon</label>
        <br>
        <select name="moon" class="form-control-moon" id="moon">
          <option value="" selected disabled hidden>Choose Your Moon</option>
          <option value="Aquarius">Aquarius</option>
          <option value="Aries">Aries</option>
          <option value="Cancer">Cancer</option>
          <option value="Capricorn">Capricorn</option>
          <option value="Gemini">Gemini</option>
          <option value="Leo">Leo</option>
          <option value="Libra">Libra</option>
          <option value="Pisces">Pisces</option>
          <option value="Sagittarius">Sagitarrius</option>
          <option value="Scorpio">Scorpio</option>
          <option value="Tarus">Taurus</option>
          <option value="Virgo">Virgo</option>
        </select>
        <br>
        <label for="rising" style="color: #4caf50ff">Rising</label>
        <br>
        <select name="rising" class="form-control-rising" id="rising">
          <option value="" selected disabled hidden>Choose Your Rising</option>
          <option value="Aquarius">Aquarius</option>
          <option value="Aries">Aries</option>
          <option value="Cancer">Cancer</option>
          <option value="Capricorn">Capricorn</option>
          <option value="Gemini">Gemini</option>
          <option value="Leo">Leo</option>
          <option value="Libra">Libra</option>
          <option value="Pisces">Pisces</option>
          <option value="Sagittarius">Sagitarrius</option>
          <option value="Scorpio">Scorpio</option>
          <option value="Tarus">Taurus</option>
          <option value="Virgo">Virgo</option>
        </select> 
        <br>
        <label style="color: #6a1b9aff;">Search</label>
        <br>
        <input type="button" value="Find My Twin" id="but" onclick="text()" />
        <hr>
        <p id="resulttext"></p>
        <p id="resulttable"></p>
      </div>
    </form>
  </div>
</body>
<html>

例如，如果有人选择了 sun Aquarius、moon Aries 和 rising Cancer，那么当他们点击按钮时，我希望它返回完整的表格，其中包含 C = sun、D = moon 和 @987654329 @。

【问题讨论】：

标签： javascript google-sheets google-sheets-api google-sheets-query

【解决方案1】：

您似乎还没有开始使用 Google Sheets API。在继续从表格中获取数据之前，您将需要访问它。 API 的文档在这里：https://developers.google.com/sheets/api/。

设置说明：https://developers.google.com/sheets/api/quickstart/js
从工作表中读取值：https://developers.google.com/sheets/api/samples/reading

对您来说最简单的方法可能是提取整个数据表，然后在您的最后进行过滤。

例如，使用上面的指南将返回如下内容：

{
  "range": "Sheet1!A1:D5",
  "majorDimension": "ROWS",
  "values": [
    ["Item", "Cost", "Stocked", "Ship Date"],
    ["_st.x_r","Aquarius","Aquarius","Aquarius"],
    ["Placlara","Aquarius","Aquarius","Aquarius"],
    ["@sassybre2","Aquarius","Aquarius","Aquarius"],
    ["awitchydisco","Aquarius","Aquarius","Aries"],
    ["ellelleff","Aquarius","Aquarius","Cancer"],
    ["hunter.frisk","Aquarius","Aquarius","Cancer"],
    ...
  ],
}

然后您可以使用response.values 过滤获取值，并使用response.values.filter(value => value[1] == 'sun' && value[2] == 'moon' && value[3] = 'rising' 之类的内容过滤它们。

【讨论】：

这是否考虑了积极更新的工作表？我每周收到几百个新条目。此外，我想到的其他可能的解决方案是获取活动工作表，并使用 setQuery 及其 WHERE 子句填充用户选择的选项。那能行吗？或者你是说这个表格方法会是最快的？
是的，这肯定会说明一个活动工作表，因为您将在客户端运行代码，这意味着将为每个用户重新获取工作表。我不确定您所说的“活动”表是什么意思。这种上下文在 Google Apps 脚本中是有意义的，但在 Google 协作平台中没有活动工作表，因此您必须使用工作表 ID 进行选择。
我也不确定你所说的setQuery是什么意思；这不是 Sheets API 的一部分。那是另一个图书馆的一部分吗？
对，setQuery是google.visualization.Query类的一个方法
看起来 Visualization API 的 Query 类可以完全取代 Sheets API，所以我不会同时使用这两个。你选择哪一个取决于你的工作；如果您还要进行可视化，我会使用 Visualization API。如果您希望将数据写入到表格，则需要表格 API。对于获取，它们都可以工作，所以这取决于你。

【解决方案2】：

我昨天设法弄明白了。我将此添加到我的头脚本中

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="//www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['table']});
    </script>
    <script type="text/javascript">
    var visualization;
    function drawVisualization() {
      // This saves the user's selected options from the selects in the body
      var sun = $('#sun').find(":selected").text();
      var moon = $('#moon').find(":selected").text();
      var rising = $('#rising').find(":selected").text();

      //How to query from a Google Sheets doc via URL
      var query = new google.visualization.Query(
          '//docs.google.com/spreadsheets/d/1f5WBP_vizrCw27fSA6yc0EEN_twmdC-PoXZhm_PSNH0/edit?usp=sharing');

      // The SELECT query where I search based on the user input variables, also created labels for the table headers
      query.setQuery("SELECT B,C,D,E WHERE C = '"+sun+"' AND D = '"+moon+"' AND E = '"+rising+"' ORDER BY B LABEL B 'Instagram', C 'Sun', D 'Moon', E ' Rising'");

      // Send the query with a callback function.
      query.send(handleQueryResponse);
    }

    function handleQueryResponse(response) {
      if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
      }

      var data = response.getDataTable();
      visualization = new google.visualization.Table(document.getElementById('visualization'));
      visualization.draw(data, {width: '500px'});      
    }
    </script>

这里的这部分是触发上述函数的HTML正文中的小sn-p

<input type="button" value="Find My Twin" id="but" onclick="drawVisualization()" />
<hr>
<div id="visualization"></div>

【讨论】：