JSONを画面上にそのまま表示しても、見づらいですよね。
http://tokyometroapp.herokuapp.com/api/TrainInformation
そこでこのJSONを取ってきて多少見栄えを良くしてみます。
今回使うのはjQuery JSONView
いつものようにPlay Frameworkへの設置方法です。 jQueryがもう入っている前提で話を進めます。
build.sbt
WebJarsに登録されているので以下のようにしてセットします。
libraryDependencies ++= Seq( "org.webjars" % "jquery-jsonview" % "0.2.0" )
app/views/main.scala.html
テンプレートにCSS,JSの読み込み設定を追加します。
<link rel='stylesheet' href='@routes.WebJarAssets.at(WebJarAssets.locate("jquery.jsonview.css"))'>
<script type='text/javascript' src='@routes.WebJarAssets.at(WebJarAssets.locate("jquery.jsonview.js"))'></script>
app/views/trainInformation.scala.html
データを入れるdiv要素を用意しておきます。 $.ajaxでJSONデータを取得後、ループさせてデータを追記していきます。
@() @main("東京メトロオープンデータサンプルAPI") { <div id="json"></div> }{ <script> $(function() { $.ajax({ type: 'GET', url: '/api/TrainInformation', dataType: 'json', success: function(json){ var len = json.length; for(var i=0; i < len; i++){ $object = $("<div/>").attr("id","json" + (i+1)); $('#json').append($object); $('#json' + (i+1)).JSONView(json[i]); } }, error: function(json){ } }); }); </script> }
詳しくは以下のコミットを見てみてください。
https://github.com/YoshiteruIwasaki/tokyometroapp/commit/a2546073f08b2a75206cb706197d80f061f9e0ea https://github.com/YoshiteruIwasaki/tokyometroapp/commit/f72cd36ef4880c6a5c1b80cd53f6667c1d2ee573
多少綺麗になった見栄えがこちら
http://tokyometroapp.herokuapp.com/html/TrainInformation