今回ご紹介するTipsは、Titanim Mobileを使って、サーバーからJSONデータをダウンロードして、JSONパースを行い、その内容をテーブルへ表示させてみましょう。
今回使用するJOSNデータについて
JSONパースするのサンプルプログラム用に以下のページにて、プロ野球の順位表をJSON形式で提供しています。
野球情報データAPI(現在は非公開となっております)
JSONデータの作りとしては以下の通りになっています。JSONデータの構造は本質的なものでは無いので、説明を簡単にする為にcentralLeague以下の配列の仕様する要素だけピックアップしました。
{ "centralLeague":[ {"Rank":"1位", "TeamName":"中日", "GameCount":"144", 〜勝ち数や負け数など〜 {"Rank":"2位", 〜セ・リーグの2位以下の成績〜 ], 〜パ・リーグの成績〜 〜交流戦の成績〜 }
今回は、順位とチーム名と試合数の3つを使用します。
ソースコード
通信にはTitanium.Network.createHTTPClientを使用します。オブジェクトを生成して、onloadイベント時に実行される匿名メソッドを設定しましょう。
onloadイベントでチーム名称、順位、試合数のLabelオブジェクトを生成して、「Titanium MobileでListViewを使ってJSONデータを表示する - 酢ろぐ!」の通り、TableViewにデータソースを設定します。
// この辺りはテンプレートプロジェクトのソースコードのままです var win2 = Titanium.UI.createWindow({ title:'パ・リーグ', backgroundColor:'#fff' }); var tab2 = Titanium.UI.createTab({ icon:'KS_nav_ui.png', title:'Baseball', window:win2 }); (function() { // オブジェクトを生成します。 var xhr = Titanium.Network.createHTTPClient(); xhr.open('GET', 'http://api.ch3cooh.jp/baseball/standings.json'); // データダウンロード時のイベント処理 xhr.onload = function() { // JSONパース var json = JSON.parse(this.responseText); // パ・リーグのデータ var data =[]; for (var i=0; i<json.centralLeague.length;i++) { var info = json.centralLeague[i]; // ここからCellを生成する // チーム名称のラベルを生成 var labelName = Titanium.UI.createLabel({ text:info.TeamName, font:{fontSize:15,fontWeight:'bold'}, textAlign:'left', color:'#000',top:0, left:30, width:40, height:60 }); // 順位のラベルを生成 var labelRank = Titanium.UI.createLabel({ text:info.Rank, font:{fontSize:12,fontWeight:'bold'}, textAlign:'left', color:'#000',top:0, left:3, width:'auto' }); // 試合数のラベルを生成 var labelGameCount = Titanium.UI.createLabel({ text:'試合数:' + info.GameCount, font:{fontSize:10}, textAlign:'left', color:'#000',top:0, left:130, width:'auto', height:20 }); // Cellのクラス名と高さを定義 var row = Ti.UI.createTableViewRow({ className:"NomalCell", height:60 }); // RowにLabelオブジェクトの追加 row.add(labelGameCount); row.add(labelName); row.add(labelRank); data.push(row); } // TableViewの作成 var table =Ti.UI.createTableView({ data:data }); win2.add(table); }; // HTTPリクエストの送信 xhr.send(); })();
実行結果
上記のソースコードを実行しました。非同期で処理される為、アプリ起動直後にはTableViewには何も表示されず、少し待った後に表示されると思います。
ハマりどころは、createTableViewRowメソッドで生成したTableViewRow(iPhoneで言うところのUITableViewCell)に対して、追加しているLabelはheightプロパティに値を設定しておかないと'auto'が設定されてしまい、中央に配置されてしまうので気をつけましょう。