fusion tables - Calling the API from a browser using JavaScript - uncaught typeError

StackOverflow https://stackoverflow.com/questions/21497573

  •  05-10-2022
  •  | 
  •  

Question

I am trying to get some data out of a Google Fusion Table.

I have used the Google documentation to produce a JSON file using by calling the Fusion Tbales API like so: https://www.googleapis.com/fusiontables/v1/query?sql=SELECT%20*%20FROM%yyyyyy&key=xxxxxxxxx"

I now what to incorporate this call into a webpage and display the results on the same page.

I have followed the instructions on this page which gives some example code (Calling the API from a browser using JavaScript): https://developers.google.com/fusiontables/docs/v1/getting_started#JS

I have put the code on my site and replaced the script call with the one from the top of this post.

When I view the page nothing displays on the page and i get an error in the Google console saying: Uncaught TypeError: Cannot read property 'length' of undefined

Does any one know of a better example or tutorial on this where the example code works?

OR

Does any on know why this script is failing?

The code:

<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>
Was it helpful?

Solution

When I run your code, I get a javascript error in Chrome:

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.

You are missing the "callback=handler" parameter in your query (from the example you quote).

Once I fix that your parsing routine is not correct for the data returned, there is no items property of the response. This works for me:

<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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top