使用用户选择的变量来选择融合表查询中的列

时间:2016-06-23 09:00:37

标签: javascript google-visualization google-fusion-tables

这可能是一个语法问题。问题的核心是将列切换到行,但这似乎比生成一个表格更复杂,该表格为我提供了每列所需的所有数据。

问题是我如何传递变量" beach"到Fusion表的SELECT查询?输出应该是两列表; col0和所选列形成此表fusiontable with all data per column

<html>
  <head>
    <meta charset="UTF-8">

    <title>Beach pollution individual results</title>

    <link href="/apis/fusiontables/docs/samples/style/default.css"
        rel="stylesheet" type="text/css">
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>

    <style type="text/css">



    </style>

    <script type="text/javascript">
      google.load('visualization', '1');

      function drawTable() {
        // Construct query
        var beach = document.getElementById('beach').value;
        var query = "SELECT ' 'col0', '" beach "' " +'FROM 1cmRBkYKhvdGUR-xXBLcMGU67koVYEgpDJT6jxOnA';

        var queryText = encodeURIComponent(query);
        var gvizQuery = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq='  + queryText);

        // Send query and draw table with data in response
        gvizQuery.send(function(response) {
          var numRows = response.getDataTable().getNumberOfRows();
          var numCols = response.getDataTable().getNumberOfColumns();

          var ftdata = ['<table><thead><tr>'];
          for (var i = 0; i < numCols; i++) {
            var columnTitle = response.getDataTable().getColumnLabel(i);
            ftdata.push('<th>' + columnTitle + '</th>');
          }
          ftdata.push('</tr></thead><tbody>');

          for (var i = 0; i < numRows; i++) {
            ftdata.push('<tr>');
            for(var j = 0; j < numCols; j++) {
              var rowValue = response.getDataTable().getValue(i, j);
              ftdata.push('<td>' + rowValue + '</td>');
            }
            ftdata.push('</tr>');
          }
          ftdata.push('</tbody></table>');
          document.getElementById('ft-data').innerHTML = ftdata.join('');
        });
      }

      google.setOnLoadCallback(drawTable);
    </script>

  </head>
  <body>
    <div>
      <label>Beach:</label>
      <select id="beach" onchange="drawTable();">
        <option value="" selected="selected">All</option>
        <option value="Baye de Clarens">Baye de Clarens</option>
        <option value="Pierrier">Pierrier</option>
        <option value="Pierrier sud">Pierrier sud</option>
        <option value="Maladaire">Maladaire</option>
        <option value="Le Port, La Tour-de-Peilz">Port de La La Tour-de-Peilz</option>
        <option value="Bain des Dames">Bain des dames</option>
        <option value="Oyonne">Oyonne</option>
        <option value="Veveyse">Veveyse</option>
        <option value="L' Arabie">l'Arabie</option>
        <option value="Montreux">Montreux</option>
        <option value="Boiron">Boiron</option>
        <option value="Villa Barton">Villa Barton</option>
        <option value="Jardin ">Jardin Botanique</option>
        <option value="Thonnon">Thonnon</option>
      </select>
    </div>
    <div id="ft-data"></div>
  </body>
</html>

这与我提出的另一个问题非常类似,该解决方案有效并将用于主页面,但理念是让当地居民在他们的邻居中获取海滩上的详细信息和数据。

由于

1 个答案:

答案 0 :(得分:0)

'query ='语句中有js语法错误

1)了解如何使用引号。

2)+是用于连接字符串的Javascript运算符

var beach = 'Utah';

// var query = "SELECT ' 'col0', '" beach "' " +'FROM 1cmRBkYKhvdGUR-xXBLcMGU67koVYEgpDJT6jxOnA';

 var query = "SELECT 'col0', '" + beach + "' FROM 1cmRBkYKhvdGUR-xXBLcMGU67koVYEgpDJT6jxOnA";

console.log(query);