JSONをconsole.logで整形して表示する（JSON.stringifyでインデント付き展開）

はじめに

JSONデータをインデントと改行で整形（フォーマット）してconsole.log()で出力します。
方法は、JSON.stringify()に3つの引数を指定するだけで簡単です。

• PHPのvar_dumpやprint_rのようなことをしたい。

のような場合に便利に使えます。
なお、[object Object]で表示された、オブジェクトの中身を確認したい場合はconsole.dir()が適しています。

JSON.stringify()を使う

構文

JSON.stringify(JSONオブジェクト, null, インデント数);

まず、JSON.stringify()で指定できる3つの引数を簡単に確認しておきましょう。

第1引数：jsonオブジェクトを指定します。
第2引数：replacerといってコールバックを指定できますが、今回は整形用にnullを指定します。
第3引数：数値を指定すると、指定数の空白文字でjsonオブジェクトをインデント整形します。

サンプル

インデントで整形

javascript

// JSONオブジェクト
var obj = {
    "name": "taro",
    "date": "2020-10-25 12:30:18",
    "item": [
        "ラーメン",
        "チャーハン",
        "餃子"
    ]
}

// 空白2文字でインデントして整形出力（インデントの個数：２）
console.log(JSON.stringify(obj, null, 2));

インデントの個数は「2」にしています。

console.log()

{
  "name": "taro",
  "date": "2020-10-25 12:30:18",
  "item": [
    "ラーメン",
    "チャーハン",
    "餃子"
  ]
}

タブで整形

javascript

// JSONオブジェクト
var obj = {
    "name": "taro",
    "date": "2025-10-20 12:30:18",
    "item": [
        "ラーメン",
        "チャーハン",
        "餃子"
    ]
}

console.log(JSON.stringify(obj, null, '\t'));

第3引数に'\t'と指定すれば、タブによるインデントも可能です。

console.log()

{
    "name": "taro",
    "date": "2020-10-20 12:30:18",
    "item": [
        "ラーメン",
        "チャーハン",
        "餃子"
    ]
}

整形をしない場合

第1引数のみ指定

// JSONオブジェクト
var obj = {
    "name": "taro",
    "date": "2020-10-25 12:30:18",
    "item": [
        "ラーメン",
        "チャーハン",
        "餃子"
    ]
}

// 第1引数のみ指定
console.log(JSON.stringify(obj));

// 出力結果
{"name":"taro","date":"2020-10-25 12:30:18","item":["ラーメン","チャーハン","餃子"]}

整形の必要がない場合は、第1引数のみで指定OK。

オブジェクトの中身を確認したい

javascript

var obj = {
    "name": "taro",
    "date": "2020-10-25 12:30:18",
    "item": [
        "ラーメン",
        "チャーハン",
        "餃子"
    ]
}

console.dir(obj);

[object Object]で出力される、オブジェクトの中身を確認したい場合はconsole.dir()を使うと便利です。

console.dir()

Object
date: "2020-10-25 12:30:18"
item: Array(3)
0: "ラーメン"
1: "チャーハン"
2: "餃子"
length: 3
__proto__: Array(0)
name: "taro"
__proto__: Object

コンソールで展開して、このように表示できます。

参考