この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
JSONデータを見やすく表示する
最近はすっかり見慣れた形式であるJSONですが、見慣れていない人にとってはどういう構造になっていて、 何を表しているのか少々わかりづらい感があります。
{
"name" : "taro",
"email" : "taro@taro.com",
"job": "programmer",
"language" : ["Java","Javascript","Ruby"],
"address" : {
"country" : "Japan",
"city" : "Tokyo"
}
}
今回紹介する、json.human.jsを使用すると、JSON形式の文字列を、テーブルを使用して 見やすい形にしたhtmlデータを出力してくれます。 次のようにbowerを使えば簡単にインストールできます。
% bower install json-human --save
htmlに組み込んで使ってもいいのですが、、ここでテキストエリアにJSONを入力すれば結果を見れるので、使ってみましょう。
Input: JSON欄に先ほどのJSONを入力し、Convertボタンをクリックします。 すると、図のように視覚化されたJSONデータと、そのraw htmlデータが表示されます。
まとめ
自分のアプリで使用する場合でも、JsonHuman.format関数で文字列を変換するだけなので簡単です。