JavaScript | Google Visualization 簡化

本次利用 Google Visualization 來製作新番表和搜尋，而新番表內容包含了以 AJAX 方式，向 Google 表單送出請求來達成快速增加新番。(成品見左方Website欄位)
當然對於我這個笨蛋來講，若能把整體結構給簡化便可以更好利用，於是我便開始此作業，本次是對 Google Visualization 的單純 JSON 資料進行簡化，原試算表不包含任何圖形或顏色，僅有簡單的資料。

不過在進行簡化，我們首先必須取得 Google Visualization 的 API
載入下面網址的 Script
<script type="text/javascript" src='//www.google.com/jsapi?autoload={"modules":[{"name":"visualization","version":"1"}]}'></script>

而以下便減化後的 Google Visualization 的 JavaScript

GetDataFromGoogleVisualization(表格Key, 資料表號, 搜尋Key, 開始位置, 顯示數量);

雖然簡化了，但是需要從 Google 方面得到所需的資料。
以下便是利用 Google 提供的 API 來獲取資料

var JSONdata;
//Get Data via GoogleVisualization
function GetDataFromGoogleVisualization(pkey, sheetkey, skey, x, y){
    var query = new google.visualization.Query('http://spreadsheets.google.com/tq?key=' + pkey + '&gid=' + sheetkey);
    var keys = skey.split(" ");
    var SQL = "where ";

    for(var i = 0 ; i < keys.length ; i++){
        if(i > 0){
            SQL += "or ";
        }
        SQL += "upper(B) like '%"+keys[i].toUpperCase()+"%' ";//B欄的key
    }

    query.setQuery(SQL);
    query.send(function(response){

        if(!response.isError()){
            JSONdata = JSON.parse(response.getDataTable().toJSON());
            ShowJSONData( x, y);
        }else{
            alert('Database or network error, please try again later.');
        }
    })      
}

得到資料後當然要顯示出來才會有一定的價值。
當然你也可以選擇不顯示。

//Show JSON data
function ShowJSONData( x, y){
    x++;
    if ((y > JSONdata.rows.length) || (y == 0)) y = JSONdata.rows.length;
    y++;

    for (var i = x; i < (x - 1 + y);  i++) //Row 行
        for (var j = 0; j < JSONdata.rows[i].c.length; j++) // Col 欄
            console.log(JSONdata.rows[i].c[j].v); 
}