javascript console.logでJSONデータを見やすく表示する

javascript console.logでJSONデータを見やすく表示する

javascriptで、console.logでJSONデータを見やすく表示するサンプルコードを記述してます。

環境

  • OS windows11 home
  • ブラウザ chrome 106.0.5249.103

JSONデータを見やすく表示

JSONデータを見やすく表示するには、「JSON.stringify」の第二引数に「null」を第三引数に空白の文字数を指定します。

const j = [
    {
        "total": 3,
        "users": [{
            "name": "itiro",
            "age": 10
        }, {
            "name": "高橋次郎",
            "age": 18,
        }, {
            "name": "田中三郎",
            "age": 21,
        }]
    }
]

// 通常
console.log( JSON.stringify(j) )

// 第二引数に「null」を指定して、空白文字数を 2に指定(最大10)
console.log( JSON.stringify(j, null, 2) )

実行結果を確認すると、見やすくなっていることが確認できます。