2018/04/05更新

[フロントエンド] JSON.stringify()の結果を整形して表示する

このエントリーをはてなブックマークに追加            

こんにちは、@yoheiMuneです。
JavascriptオブジェクトをJSON文字列に変換できるJSON.stringify()ですが、結果を整形することができます。今日はそれをブログに書きたいと思います。



JSON.stringyの結果を整形する

早速ですが、JSON.stringyの第3引数に\t(=タブ)を指定することで、結果を整形することができます。
let obj = {
    key1 : 'value1',
    key2 : 'value2'
}

// 第3引数に、「\t」を指定すると、結果が整形される.
let json = JSON.stringify(obj, null, '\t')

console.log(json)
// {
//     "key1": "value1",
//     "key2": "value2"
// }
\t以外にも半角スペースなども指定可能です。
これでいい感じに整形して表示できました。



なぜ整形できるのか

実は、JSON.stringifyの引数には、第3引数まで指定可能です(僕は知りませんでした)。
// Syntax
// JSON.stringify(value[, replacer [, space]])

// value    : Javascriptオブジェクト
// replacer : 変換時の振る舞いを指定する
// space    : 文字列を指定することで、整形した状態で表示できる
今回は第3引数のspaceを利用することで、整形した状態を得ていたのです。

JSON.stringify()の詳細はstringify - MDNを参照ください。



最後に

今回の実装はお仕事で使う機会があったので調べました。上記のMDNのリンクを見ると、もう少し勉強になることもあるので読むと面白いです。

最後になりますが本ブログでは、フロントエンド、Swift、PHP、Node.js、Linux、Python、Java、インフラ、Go言語、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に!」そんな目標でブログを書き続けています。ぜひ、本ブログのRSSTwitterをフォローして貰えたら嬉しいです ^ ^

最後までご覧頂きましてありがとうございました!





こんな記事もいかがですか?

[取り組み] フロントエンドでコーディングスピードをアップさせる6つの方法!と思って書いてたら30個も書いちゃった。
[フロントエンド] フロントエンドの入社試験99問!難しいですよ〜w。
[フロントエンド] Webページを表示するテストの際に、通信速度を3Gに制限して表示してみよう
[フロントエンド] スマホ実機でのデバッグ手段を増やす!Macのプロキシを利用して、通信内容を確認する。
[フロントエンド] Chrome 35 Beta の変更点。Touch制御、新しいJavaScript機能、プレフィックスなしのShadowDOM
[フロントエンド]複数アカウントでのテストには、Chromeのユーザー管理を使って、Cookieを切り替えると便利
[フロントエンド] Chrome36βが出た。変更点など。element.animate、HTML Imports、Object.observe、他。
RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。