融合表 - 使用 JavaScript 从浏览器调用 API - 未捕获的 typeError答案

【问题标题】：fusion tables - Calling the API from a browser using JavaScript - uncaught typeError融合表 - 使用 JavaScript 从浏览器调用 API - 未捕获的 typeError
【发布时间】：2014-02-03 06:13:05
【问题描述】：

我正在尝试从 Google Fusion Table 中获取一些数据。

我使用 Google 文档通过调用 Fusion Tbales API 生成 JSON 文件，如下所示： https://www.googleapis.com/fusiontables/v1/query?sql=SELECT%20*%20FROM%yyyyyy&key=xxxxxxxxx"

我现在将这个调用合并到网页中并在同一页面上显示结果。

我已按照此页面上的说明进行操作，其中提供了一些示例代码（使用 JavaScript 从浏览器调用 API）： https://developers.google.com/fusiontables/docs/v1/getting_started#JS

我已将代码放在我的网站上，并用本文顶部的脚本调用替换了脚本调用。

当我查看页面时，页面上没有显示任何内容，并且我在 Google 控制台中收到错误消息：Uncaught TypeError: Cannot read property 'length' of undefined

有没有人知道一个更好的例子或教程，其中示例代码可以工作？

或

有人知道为什么这个脚本失败了吗？

代码：

<html>
  <head>
    <title>Google Fusion Tables API Example</title>
  </head>
  <body>
    <div id="content"></div>
    <script>
    function handler(response) {
      for (var i = 0; i < response.items.length; i++) {
        var item = response.items[i];
        // Either show the body or the automatic columns of the template
        if (item.body) {
          document.getElementById("content").innerHTML += "<br>" + item.body;
        } else {
          for (var j = 0; j < item.automaticColumnNames.length; j++) {
            document.getElementById("content").innerHTML += "<br>" + item.automaticColumnNames[j];
          }
        }
      }
    }
    </script>
 <script src="https://www.googleapis.com/fusiontables/v1/query?sql=SELECT%20*%20FROM%20xxxxq5TFqB4oM-HCQBkRqzOM6uC2qAIJDk91Q&keyXXXXXXXX"></script>


  </body>
</html>

【问题讨论】：

你的代码是什么样的？你的桌子是什么样子的？您是否为您的表启用了下载？
所有代码都在我提供的链接上。我唯一改变的是融合表 API 的
在 StackOverflow 中，您应该在帖子中发布相关内容，而不仅仅是链接。至少没有表号，您的帖子中没有足够的信息来提供帮助。您可以在您的代码上运行调试器并查看问题所在，我们不能。
嗨@geocodezip。我现在已经从页面中添加了代码。

标签： json google-fusion-tables

【解决方案1】：

当我运行您的代码时，我在 Chrome 中收到一个 javascript 错误：

Refused to execute script from 'https://www.googleapis.com/fusiontables/v1/query?sql=SELECT%20*%20FROM%20XXXXXXX&key=XXXXXXX' because its MIME type ('application/json') is not executable, and strict MIME type checking is enabled.

您的查询中缺少“callback=handler”参数（来自您引用的示例）。

一旦我修复了您的解析例程对于返回的数据不正确，则响应中没有 items 属性。这对我有用：

<html>
  <head>
    <title>Google Fusion Tables API Example</title>
  </head>
  <body>
    <div id="content"></div>
    <script>
    function handler(response) {
      var contentStr = "<table>";
      for (var i = 0; i < response.rows.length; i++) {
        var item = response.rows[i];
        contentStr += "<tr>";
        for (var j = 0; j < item.length; j++) {
          contentStr += "<td>" + item[j]+"</td>";
        }
        contentStr += "</tr>";
      }
      contentStr += "</table>";
      document.getElementById("content").innerHTML = contentStr;
    }
    </script>
 <script src="https://www.googleapis.com/fusiontables/v1/query?sql=SELECT%20*%20FROM%20XXXXX=XXXXXX&callback=handler"></script>
  </body>
</html>

working example

【讨论】：

感谢@geocodezip，我查看了有关实现与此问题相同的文档，但使用的是 PHP 而不是 JavaScript。因为我通常使用 PHP 开发。我在这个主题上发现的很少，并且缺乏示例的开发人员 wiki。你知道这是否可能吗？或者，您有没有更好的 JavaScript 示例可以更轻松地控制输出格式。我想要更多地控制布局。你似乎是这里的谷歌地图专家！
我不做 PHP（至少不多）。通过动态生成的 HTML 控制输出的格式（您可以添加 css 类和样式）。
对于任何想知道如何在 PHP 中执行此操作的人，请阅读这篇出色的文章/示例：developers.google.com/maps/articles/phpsqlajax_v3 它需要您完成从设置表到显示信息的整个设置这页纸。然而，将大头针放到地图上的最后一部分是在 JavaScript 中。
抱歉，我本可以向您指出这一点。以为您正在寻找 FusionTables 代码（如果您查看 FusionTables 文档，Google 也有一些库和文档）。