jQuery JSONViewを使ってJSONを見やすくする

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