Query Fusion Table from JavaScript function in API v1

Question

I am trying to figure out how to use the new Fusion Table API v1 to query a table, from within a Javascript function. I want to be able to loop through the result, row by row, and do something else (in this case geocoding addresses) as I go.

I have the syntax for the query working OK. When I paste the http it into a browser it returns the correct result.

What I can’t figure out is how to make the request in the first place, and get the result where I can use it.

This post is close to what I’d like to do, but it uses the old API: http://www.reddmetrics.com/2011/08/10/fusion-tables-javascript-query-maps.html

function getData() {
    // Builds a Fusion Tables SQL query and hands the result to  dataHandler

    var queryUrlHead = 'https://www.googleapis.com/fusiontables/v1/query?sql=';
    var queryUrlTail = '&key={my key}';
    Table = {my table id};

    // write your SQL as normal, then encode it
    var query = "SELECT Address, Name FROM " + Table + " LIMIT 5";
    var queryurl = encodeURI(queryUrlHead + query + queryUrlTail);

    var jqxhr = $.get(queryurl, dataHandler, "jsonp");
}

Maybe jquery is not needed with the new api?

So what I didn't know was that I need to enable jquery on my page using something like this: which access it via google! — David Colyer, Aug 04 '13 at 23:56
One of the Google examples seems to invoke a callback function in the query itself, using the following: "&callback=handler". Does anyone had experience with this? How is it different from jquery? What are the advantages? — David Colyer, Aug 05 '13 at 00:02
The callback=handler is used for [JSONP](http://stackoverflow.com/questions/2067472/what-is-jsonp-all-about). You can either do this yourself or just let jQuery take care if it (jQuery uses JSONP as well). — Odi, Aug 05 '13 at 07:15

score 1 · Accepted Answer · answered Aug 04 '13 at 12:31

The code you provided is okay, it works as expected (for me). I created a jsFiddle to show you an example usage of it.

All you need to do it specify a function called dataHandler as this is what you tell jQuery to use as a callback. I.e. the result of the jQuery call is, that it calls the function you specified.

To get started I suggest to make you Fusion Table public. That way you can explore the usage of the API without having to worry about authentication etc.

function dataHandler(response) {
    console.log(response);
    //do something with the data using response.rows
}

function getData() {
    // Builds a Fusion Tables SQL query and hands the result to  dataHandler

    var queryUrlHead = 'https://www.googleapis.com/fusiontables/v1/query?sql=';
    var queryUrlTail = '&key={my key}';
    Table = {my table id};

    // write your SQL as normal, then encode it
    var query = "SELECT Address, Name FROM " + Table + " LIMIT 5";
    var queryurl = encodeURI(queryUrlHead + query + queryUrlTail);

    var jqxhr = $.get(queryurl, dataHandler, "jsonp");
}

If you just use console.log to analyze the response you get from Fusion Tables (press F12 in your browser to open the console/Developer Tools), you see that you get an object with a columns and a rows property, like that you can use the data the way you like. My example above simply prints a HTML table of the retrieved data.

In case your query has an error or is not accessible the error property is set with an according error message.

Thanks Odi, your example and jsFiddle itself was really helpful. Once I got things working there I realised the problem was with my page, which led me to (finally!) figure out that I needed to enable jquery (see my comment above). — David Colyer, Aug 04 '13 at 23:59

Query Fusion Table from JavaScript function in API v1

1 Answers1