jsonの内容をダンプ表示(javascript,jQuery)

jQuery + PHPでサイトを構築するときに便利なのがjsonです。jQueryからPHPにpostしてその結果をjson形式で取得するとjQuery(javascript)で簡単に配列にすることができます。

デバッグや開発中のときには配列の内容をキーとともに表示したいときがあります。PHPの場合はprint_rを<pre>タグと一緒に使うことで表示できます(以前の参考記事)が、javascriptの場合は少しだけ工夫が必要です。

今回使わせていただいたのはJKL.Dumper です。以下のようにすることでダンプを出力できます。PHPの時のように<pre>タグを使うとより見やすくなります。

事前にjkl-dumper.jsを読み込んでおきます。

 <script type="text/javascript" src="jkl-dumper.js"></script> 

id=’dump’にjQueryで表示させます。

jQuery('#dump' ).html('<pre>'+(new JKL.Dumper().dump(data))+'</pre>');