JavaScript 存取 Google 試算表的資料

你知道嗎？Google 試算表也可以做為一個簡單的資料庫，支援簡單的查詢語法，或者更簡單以各種格式讀取它的資料。

以 Google Visualization API 取得資料

在 Google Visualization API 中定義了一套 Query Language，用來規範一種資料查詢、輸出的協定，使得 Visualization API 中的各種圖表元件，在讀取資料這塊有個固定的格式，只要任何「資料來源」按照這套 Query Language 來實作，都可以輕易地利用 Visualization API 畫出各種圖表。而在 Google 的服務中，Google 試算表（Spreadsheet）已經實作了這個協定，所以你也可以把資料放在 Google Spreadsheet 中，再使用 JavaScript 利用 Visualization API（其它語言當然也可以）來取得資料。
假設我在 Google 文件中建立了一個試算表，並且輸入了像這樣的表格資料：

接著我將這個試算表的權限設定為「Public on the web」（如下圖所示），於是你可以得到一個公開存取的 URL，裡面就有這份試算表的 key，將它記錄下來，稍後便會利用這個 key 來存取資料。

接著，你便可以在某個網頁裡這樣讀取這份資料：

[HTML 部份]


...
[JavaScript 部份]
// 載入 Visualization API
var URL = 'http://spreadsheets.google.com/tq?key=<你試算表的 key>';
google.load('visualization', '1');
var query = new google.visualization.Query(URL);
// 使用 query language 查詢資料
query.setQuery('select B, C where C > 50');
query.send(function(resp){
if (!resp.isError()) {
var dataTable = resp.getDataTable();
var jsonData = JSON.parse(dataTable.toJSON());
....
}
});


透過這樣的方式，你就可以利用 Query Language 來篩選要讀取的資料，在這個例子中則是會回傳兩筆資料（因為 C column 的值大於 50 的只有兩筆），而回傳之後也可以轉成 JSON 格式的資料來使用（上面的 JSON 物件並不是所有瀏覽器都有內建，如果要確保所有瀏覽器都能用，請使用 json2.js），十分方便，而資料的攞放的欄位也有一點點特別，像是這樣：

....
// 讀取資料每一個 row 的資料
var len = jsonData.rows.length;
for (var i = 0; i < len; ++i) { var row = jsonData.rows[i]; // row.c[0].v 這是 B column 的值 // row.c[1].v 這是 C column 的值 }

因為我們在上述的查詢語法中，只有 select 出 B 及 C 兩個 columns，所以它會將資料放在 row.c[0] 及 row.c[1] 之中，不過這個資料結構還有儲存像是資料型態的資訊，所以要存取它的值，就要讀取它的 v 成員變數。這樣就可以利用 Google 試算表做一個簡單的資料來源，在建立資料時可以上 Google 試算表用它的介面輸入，而網頁呈現則可以另外製作。

COSCUP 2010 的 Mobile Web App 在 Sessions/Schedule 頁面的資料就是利用這個方式存取遠端 Spreadsheet 的資料，這樣工作人員只需要利用 Google 文件的頁面修改資料，web app 的部份完全不需要修改。

至於 Query Language 可以怎麼使用，或是要怎麼讓自己的資料來源符合輸出規範，這部份就參考官方文件吧！

以 JSON 方式取得資料

當然，如果你不想使用 Visualization API 也沒關係，只要在你「發佈」（右上角的 Share 按鈕，有個 Publish as a web page）了這份文件時，就可以選擇以各種格式輸出，如下圖所示：

如果你要 json 格式的資料，雖然這個介面上目前沒有 JSON 格式可以選擇，但是你可以先選擇 RSS，再將網址中的 alt=rss 改成 alt=json 就能透過該 URL 輸出 json 格式的資料囉。