2010年11月10日水曜日

Dashcode: jQueryのCross domain site requestで取得したJSONデータをlistで表示してみた(5分で)

動機
Cross domain site requestでやれた方が便利だろうということでやってみた.
前回のdatasourceは使えないが,datasourceでどういうJSONが取得されているのかを確認するのは便利かもしれない.


やってみた



一応手順も書いてみる
0.[0:00]listとboxを用意する.
1.[0:24]listのデータタイプを動的にしてデータソース名を入力する(データソースのテンプレートが生成される).
2.[0:42]jQueryが使えるようにする.
*.([1:20]データソースのテンプレートにある値は削除しておく.)
3.[1:35]Cross site requestでJSONデータを取得するコードの記述を行う.
4.[2:20]Callback関数の記述を行う.jsonデータのfeed.entryが配列となっていて個々のentryをlistDataSource内の配列へ格納する.最後にlistにデータの再読み込みを行わせる.
5.[4:00]listの各行に表示する値を指定する.entryのtitle.$tがその値となる文字列であるのでこれを設定する.
6.[4:17]listの行をクリックして選択した際の動作を記述する.box要素にentryのcontent.$tの値(文字列)を設定する.
7,[5:00]実行

JSONデータはこちらを参考にした.
参考のままだとcallback関数のフォーマットになるのでそのあたりは削除して以下のようにしている.
http://www.google.com/calendar/feeds/developer-calendar@google.com/public/full?alt=json&orderby=starttime&max-results=15&singleevents=true&sortorder=ascending&futureevents=true

0 件のコメント: