web-dev-qa-db-ja.com

JSON解析済みオブジェクトを印刷しますか？

JSON.parseを使ってJSONで解析されたjavascriptオブジェクトを手に入れました。それをデバッグできるように、今度はオブジェクトを印刷したいと思います（関数に何か問題があります）。次のようにすると….

for (property in obj) {
    output += property + ': ' + obj[property]+'; ';
}
console.log(output);

複数の[object Object]がリストされています。内容を見るためにこれをどのように印刷するのでしょうか。

javascriptjsonparsingprinting
179
Skizit

ほとんどのデバッガコンソールはオブジェクトの直接表示をサポートしています。ただ使う

console.log(obj);

デバッガによっては、これにより、ほとんどの場合、オブジェクトはコンソールに折りたたまれたツリーとして表示されます。あなたは木を開けてオブジェクトを調べることができます。

112
RoToRa

あなたはJSONの略を知っていますか？ JavaScriptオブジェクト表記。それはオブジェクトにとってかなり良いフォーマットになります。

JSON.stringify(obj)はオブジェクトの文字列表現を返します。

513
cHao

console.dir()の代わりにconsole.log()を試してください

console.dir(obj);

MDN は、console.dir()は以下によってサポートされていると言います。

  • FF8 +
  • IE9 +
  • オペラ
  • クロム
  • サファリ
51
Distdev

インデント付きのきれいな複数行のJSONが必要な場合は、3番目の引数とともにJSON.stringifyを使用できます。

JSON.stringify(value[, replacer[, space]])

例えば：

var obj = {a:1,b:2,c:{d:3, e:4}};

JSON.stringify(obj, null, "    ");

または

JSON.stringify(obj, null, 4);

次のような結果が得られます。

"{
    "a": 1,
    "b": 2,
    "c": {
        "d": 3,
        "e": 4
    }
}"

ブラウザではconsole.log(obj)はさらに良い仕事をしますが、シェルコンソール（node.js）ではそうではありません。

41
Lukasz Wiktor

jSON解析済みオブジェクトを印刷するには、次のように入力します。

console.log( JSON.stringify(data, null, " ") );

を入力すると、非常に明確な出力が得られます。

34
BERGUIGA Mohamed Amine

文字列フォーマットを使用してください。

console.log("%s %O", "My Object", obj);

Chromeには、 フォーマット指定子 があり、次のとおりです。

  • %s値を文字列としてフォーマットします。
  • %dまたは%i値を整数としてフォーマットします。
  • %f値を浮動小数点値としてフォーマットします。
  • %o要素パネルのように、値を展開可能なDOM要素としてフォーマットします。
  • %O値を拡張可能なJavaScriptオブジェクトとしてフォーマットします。
  • %c指定したCSSスタイルに従って出力文字列をフォーマットします。

Firefoxには 文字列置換 もありますが、これらにも同様のオプションがあります。

  • %o JavaScriptオブジェクトへのハイパーリンクを出力します。リンクをクリックするとインスペクタが開きます。
  • %dまたは%i整数を出力します。フォーマットはまだサポートされていません。
  • %s文字列を出力します。
  • %f浮動小数点値を出力します。フォーマットはまだサポートされていません。

Safariには printfスタイルのフォーマッタがあります

  • %dまたは%i整数
  • %[0.N]f N桁の精度の浮動小数点値
  • %oオブジェクト
  • %s文字列
21
Dave Anderson

次のコードは、アラートボックスに完全なJSONデータを表示します。

var data= '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';

json = JSON.parse(data);
window.alert(JSON.stringify(json));
2
Kiran Kumar Kotari

オブジェクトまたは配列の内容を警告する簡単な機能。
配列または文字列、あるいは内容を警告するオブジェクトを指定してこの関数を呼び出します。

関数

function print_r(printthis, returnoutput) {
    var output = '';

    if($.isArray(printthis) || typeof(printthis) == 'object') {
        for(var i in printthis) {
            output += i + ' : ' + print_r(printthis[i], true) + '\n';
        }
    }else {
        output += printthis;
    }
    if(returnoutput && returnoutput == true) {
        return output;
    }else {
        alert(output);
    }
}

使用法

var data = [1, 2, 3, 4];
print_r(data);
2
Rayiez

ただ使う

console.info("CONSOLE LOG : ")
console.log(response);
console.info("CONSOLE DIR : ")
console.dir(response);

そして、あなたはクロムコンソールでこれを得るでしょう：

CONSOLE LOG : 
facebookSDK_JS.html:56 Object {name: "Diego Matos", id: "10155988777540434"}
facebookSDK_JS.html:57 CONSOLE DIR : 
facebookSDK_JS.html:58 Objectid: "10155988777540434"name: "Diego Matos"__proto__: Object
2
diego matos - keke

デバッグしたい場合はなぜコンソールデバッグを使用しないでください。

window.console.debug(jsonObject);
1
Ruwantha

素敵でシンプル：

console.log("object: %O", obj)
1
mbenhalima

サーバー上のjsで作業している場合、もう少し体操が大いに役立ちます...ここに私のppos（pretty-print-on-server）があります：

ppos = (object, space = 2) => JSON.stringify(object, null, space).split('\n').forEach(s => console.log(s));

これは、サーバーコードを書いているときに実際に読むことができる何かを作成するという強烈な仕事をします。

0
The Software Barbarian