Example Usage of Fusion Table API v1 with jQuery

by odi86

HTML

<div id="result"></div>

JavaScript

function dataHandler(resp) {
    console.log(resp);
    
    var result = document.getElementById('result');
    var htmlTable = document.createElement('table');
    htmlTable.border = 1;
    
    var tableRow = document.createElement('tr');
    for (var i = 0; i < resp.columns.length; i++) {        
        var tableHeader = document.createElement('th');
        var header = document.createTextNode(resp.columns[i]);
        tableHeader.appendChild(header);
        tableRow.appendChild(tableHeader);
        
    }
    htmlTable.appendChild(tableRow);
    for (var i = 0; i < resp.rows.length; i++) {
        var tableRow = document.createElement('tr');
        for (var j = 0; j < resp.rows[i].length; j++) {
            var tableData = document.createElement('td');
            var content = document.createTextNode(resp.rows[i][j]);
            tableData.appendChild(content);
            tableRow.appendChild(tableData);
        }
        htmlTable.appendChild(tableRow);
    }
    result.appendChild(htmlTable);
}

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=AIzaSyCAI2GoGWfLBvgygLKQp5suUk3RCG7r_ME';
    var tableId = '17jbXdqXSInoNOOm4ZwMKEII0sT_9ukkqt_zuPwU';

    // write your SQL as normal, then encode it
    var query = "SELECT 'Country Name', '1960' as 'Population in 1960', '2000' as 'Population in 2000' FROM " + tableId + " ORDER BY 'Country Name' LIMIT 10";
    var queryurl = encodeURI(queryUrlHead + query + queryUrlTail);

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

getData();