Return Table 来自 Google 个工作表，在 Google 个站点中使用来自 3 个 Select 列表的选项

Question

我有一个 Google Sheet，我想让用户通过在 select 列表中选择三个选项来在 Google 站点中查询并拥有它 return 结果为 table.

我的 sheet 是 here。

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

<!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>

例如，如果某人 select 编辑了 sun Aquarius、moon Aries 和 rising Cancer，那么当他们按下按钮时，我希望它 return 完整的 table 其中 C = sun、D = moon 和 E = rising.

Answer 1

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

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

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

例如，使用上面的指南会 return 像这样：

{
  "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'.

之类的东西过滤它们

Answer 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 正文中触发上述功能的小片段

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

Return Table 来自 Google 个工作表，在 Google 个站点中使用来自 3 个 Select 列表的选项

Return Table from Google Sheets in Google Sites Using Options from 3 Select Lists

javascript

google-sheets

google-sheets-api

google-sheets-query