Question

我有一个Google表格，我希望用户可以通过在选择列表中选择三个选项来让用户在Google站点中进行查询，并将其作为表格返回结果。

我的工作表是here。

我尝试了一些setQuery示例，但是运气不佳，因为几乎所有示例都返回了我不想要的图表，只是一张表格中的表格。以下是我嵌入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>

例如，如果某人选择了sun Aquarius，moon Aries和rising Cancer，那么当他们按下按钮时，我希望它返回完整表，其中C = sun ，D = moon和E = rising。

Answer 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'这样的过滤条件。

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>

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

2 个答案: