この記事は賞味期限切れです。（更新から1年が経過しています）

『GoogleスプレッドシートをJSONPで利用する（前編）』の続きです。
一連の処理をまとめてみたスクリプトを紹介します。

書いてみたもの

SpreadSheetLoader

mach3/js-spreadsheetloader via GitHub

• スプレッドシートのJSONを読み込みます
• 読み込んだデータを整理します
• jQuery 1.7+ が必要です

簡単な使い方

1. URLを取得

まず前編の記事を参考にしてURLを取得してきましょう。
形式は「Atom」または「RSS」の、「セル」を選択してください。
こんな感じのURLですね。

https://spreadsheets.google.com/feeds/cells/**********/***/public/basic

2. 読み込む

まずはインスタンスを初期化し、URLを渡し、読み込みます。

// 1. インスタンス初期化
var myloader = new SpreadSheetLoader( [your_url] );

// 2. readyイベントハンドラを登録
myloader.on("ready", function(){
    var data = this.getData();
});

// 3. load()
myloader.load();

1. コンストラクタの引数にURLを渡して初期化します。
   URLは後からsetUrl()で渡すことも出来ます。
2. on()でreadyイベントへのハンドラを設定します。
   readyイベントは、スプレッドシートが読み込まれ、データが整理された時点で発火します。
3. load()で読み込み開始

3. データを利用する

readyイベントハンドラの中では、自由にデータを利用する事ができます。
あとは煮るなり焼くなり。
データの利用の仕方は…

データを取得する

整理されたデータを取得して利用する為には、幾つかの方法が用意されています。

getData() : Array

データがまるごと配列で返されます。

myloader.on("ready", function(){
    var data = this.getData();
    console.log(data[3]); // 4番目のデータ
});

getItem(condition) : Array

条件に合うデータのみを配列で返します。
条件はオブジェクトで渡します。

myloader.on("ready", function(){
    var myItems = this.getItem({color:"red", price:800}); // 色がredで、価格が800の物を抽出
});

each(callback)

データに対して繰り返し処理を行います。（中身はjQuery.fn.eachです）

myloader.on("ready", function(){
    var total = 0;
    this.each(function(){
      total += this.price;
    });
    console.log( "Total price:", total ); // 全データのpriceの合計
});

試してみる

ソース

例えば、こんな表を読み込んでみます。

デモ

まとめ

前記事の通り、使える場面というのはわりと限られてそうではありますが、
何かの折に使ってみようかなと思っております。