リストとデータソース (4/8)

では、JSONデータが用意できたところで、リストにデータの内容から項目を表示させてみましょう。これには「JSONデータをデータソースに連結する」「データソースから必要な項目をリストの表示ラベルに連結する」といった操作を行います。では、手順を説明しましょう。

1. まず、データソースの「dataSource」を選択し、右下にデータソースの内容が表示されるようにしてください。

2. 「URL」欄に、「data.js」と入力してreturnします。するとdata.jsからデータを読み込み、content部分にデータの構造を表示します。中に「title」「items」といった項目が現れるはずです。

3. では、データのname値をとりだし、リストのラベルに表示するようにしてみましょう。右下の、data.jsのデータ構造を表示するところから、「items」内にある「name」項目にマウスポインタをあわせてください。その右端に、◯マークが現れます。

この◯からマウスをドラッグし（◯からマウスポインタまでびよ〜んと線が伸びます）、画面に配置したリスト内のラベル内でドロップします。すると、この項目をどの属性に接続するかポップアップメニューが現れるので、「text」を選んでください。これで、データソースのnameの値が、リストのラベルに表示されるtext属性に関連付けられました。

さあ、ここまでできたら、実際にiOSエミュレータで動かしてみましょう。起動すると、リストに「Windows」「Mac OS X」「Linux」といった項目が表示されます。data.jsに記述してあるJSONオブジェクトのdatasから、各データのname値を取り出し、リストに項目として表示していることがわかりますね。

ただし、まだリストをクリックしても何も起こりません。リストは、ただ表示するだけのものです。クリックして表示を切り替えたりするためには、新たに表示するビューや、クリック時の処理などを用意してやる必要があります。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。