JavaScriptオブジェクトを表示する方法
変数をalertにするときのように、JavaScriptオブジェクトのコンテンツを文字列形式で表示する方法を教えてください。
私がオブジェクトを表示したいのと同じフォーマットされた方法。
Firefoxの場合
デバッグ目的でオブジェクトを印刷したい場合は、代わりに Firebug for Firefox をインストールしてコードを使用することをお勧めします。
console.log(obj)
Chromeの場合
var obj = {prop1: 'prop1Value', prop2: 'prop2Value', child: {childProp1: 'childProp1Value'}}
console.log(obj)
表示されます
注意： あなたは のみ オブジェクトをログに記録する例えばこれはうまくいきません：
console.log('My object : ' + obj)
ネイティブのJSON.stringifyメソッドを使う入れ子になったオブジェクトとすべての主要なブラウザで動作します support このメソッド.
str = JSON.stringify(obj);
str = JSON.stringify(obj, null, 4); // (Optional) beautiful indented output.
console.log(str); // Logs output to dev tools console.
alert(str); // Displays output using window.alert()
Mozilla APIリファレンス および他の例へのリンク。
obj = JSON.parse(str); // Reverses above operation (Just in case if needed.)
あなたがこのJavascriptエラーに遭遇した場合、カスタムの JSON.stringify置換を使用してください
"Uncaught TypeError: Converting circular structure to JSON"
var output = '';
for (var property in object) {
output += property + ': ' + object[property]+'; ';
}
alert(output);
console.dir(object)：
指定されたJavaScriptオブジェクトのプロパティのインタラクティブリストを表示します。このリストでは、開閉用三角を使用して子オブジェクトの内容を調べることができます。
console.dir()機能は非標準です。 MDN Webドキュメント を参照してください。
これを試して ：
console.log(JSON.stringify(obj))
これはオブジェクトの文字列化バージョンを表示します。そのため、出力として[object]の代わりにobjectの内容を取得します。
さて、Firefox（詳細な情報については@Bojanglesに感謝します）は Object.toSource() オブジェクトをJSONとfunction(){}として出力するメソッドを持っています。
ほとんどのデバッグ目的にはこれで十分です、と私は思います。
あなたのオブジェクトを印刷するためにalertを使いたいのなら、こうすることができます。
alert("myObject is " + myObject.toSource());
各プロパティとそれに対応する値を文字列形式で表示します。
NodeJSでは、 util.inspect(obj) を使用してオブジェクトを印刷できます。必ず奥行きを明記してください。そうしないと、オブジェクトのプリントが浅くなります。
機能：
var print = function(o){
var str='';
for(var p in o){
if(typeof o[p] == 'string'){
str+= p + ': ' + o[p]+'; </br>';
}else{
str+= p + ': { </br>' + print(o[p]) + '}';
}
}
return str;
}
使用法：
var myObject = {
name: 'Wilson Page',
contact: {
email: '[email protected]',
tel: '123456789'
}
}
$('body').append( print(myObject) );
例：
データを表形式で見たい場合は、
console.table(obj);
テーブル列をクリックするとテーブルをソートすることができます。
表示する列を選択することもできます。
console.table(obj, ['firstName', 'lastName']);
Console.table /に関するさらに詳しい情報を見つけることができます ここ
それが最善かつ最も簡単に私が見つけた方法の前に言われた
var getPrintObject=function(object)
{
return JSON.stringify(object);
}
フルオブジェクトを Node.js で色付きでボーナスとして印刷するには、次のようにします。
console.dir(object, {depth: null, colors: true})
色はもちろんオプションで、 'depth：null'はオブジェクト全体を表示します。
オプションはブラウザではサポートされていないようです。
参考文献：
https://developer.mozilla.org/en-US/docs/Web/API/Console/dir
https://nodejs.org/api/console.html#console_console_dir_obj_options
これを使って：
console.log('print object: ' + JSON.stringify(session));
あなたはその全長のオブジェクトを印刷したい場合は、使用することができます
console.log（require（ 'util'）。inspect（obj、{showHidden：false、depth：null}）
オブジェクトを文字列に変換して印刷したい場合
console.log（JSON.stringify（obj））;
私はオブジェクトを再帰的に印刷する方法を必要としていましたが、pagewilの答えはそれでした（ありがとう！）あるレベルまで印刷し、現在のレベルに基づいて適切にインデントされるようにスペースを追加して読みやすくする方法を含めるために、少し更新しました。
// Recursive print of object
var print = function( o, maxLevel, level ) {
if ( typeof level == "undefined" ) {
level = 0;
}
if ( typeof level == "undefined" ) {
maxLevel = 0;
}
var str = '';
// Remove this if you don't want the pre tag, but make sure to remove
// the close pre tag on the bottom as well
if ( level == 0 ) {
str = '<pre>';
}
var levelStr = '';
for ( var x = 0; x < level; x++ ) {
levelStr += ' ';
}
if ( maxLevel != 0 && level >= maxLevel ) {
str += levelStr + '...</br>';
return str;
}
for ( var p in o ) {
if ( typeof o[p] == 'string' ) {
str += levelStr +
p + ': ' + o[p] + ' </br>';
} else {
str += levelStr +
p + ': { </br>' + print( o[p], maxLevel, level + 1 ) + levelStr + '}</br>';
}
}
// Remove this if you don't want the pre tag, but make sure to remove
// the open pre tag on the top as well
if ( level == 0 ) {
str += '</pre>';
}
return str;
};
使用法：
var pagewilsObject = {
name: 'Wilson Page',
contact: {
email: '[email protected]',
tel: '123456789'
}
}
// Recursive of whole object
$('body').append( print(pagewilsObject) );
// Recursive of myObject up to 1 level, will only show name
// and that there is a contact object
$('body').append( print(pagewilsObject, 1) );
（これは私のライブラリの GitHub に追加されました）
ここで車輪を再発明する！これらの解決策はどれも私の状況ではうまくいきませんでした。それで、私はすぐにpagewilの答えをまとめました。これは（コンソールやテキストフィールドなどを介して）画面に印刷するためのものではありません。ただし、データ転送用です。このバージョンはtoSource()と非常によく似た結果を返すようです。私はJSON.stringifyを試したことはありませんが、これはほぼ同じことだと思います。この関数の結果は、有効なJavascriptオブジェクト宣言です。
このようなものがSOのどこかに既に存在しているかどうかは疑いようがありませんが、過去の回答を検索するのにしばらく時間を費やすよりも、短くするほうが短かったです。そして私がこれについて調べ始めたときにこの質問がグーグルで私のトップヒットだったので。私はそれをここに置くことが他の人を助けるかもしれないと考えました。
とにかく、この関数の結果は、オブジェクトにオブジェクトと配列が埋め込まれていても、オブジェクトや配列にさらに埋め込まれたオブジェクトと配列が含まれていても、オブジェクトの文字列表現になります。 （私はあなたが飲むのが好きだと聞きました。それで、私はあなたの車をクーラーであきらめました。そして、私はあなたのクーラーをクーラーであきらめました。
配列は[]の代わりに{}で格納されているので、キーと値のペア、値だけは持っていません。通常の配列と同じです。したがって、それらは配列のように作成されます。
また、すべての文字列（キー名を含む）が引用符で囲まれています。これらの文字列に特殊文字（スペースやスラッシュなど）が含まれていない限り、これは必要ありません。しかし、私はこれを検出して、そうでなければまだうまくいくであろういくつかの引用符を削除することだけを気にしませんでした。
この結果の文字列はevalで使用することも、単に文字列操作を介してvarにダンプすることもできます。したがって、テキストからオブジェクトを再作成します。
function ObjToSource(o){
if (!o) return 'null';
var k="",na=typeof(o.length)=="undefined"?1:0,str="";
for(var p in o){
if (na) k = "'"+p+ "':";
if (typeof o[p] == "string") str += k + "'" + o[p]+"',";
else if (typeof o[p] == "object") str += k + ObjToSource(o[p])+",";
else str += k + o[p] + ",";
}
if (na) return "{"+str.slice(0,-1)+"}";
else return "["+str.slice(0,-1)+"]";
}
私がそれをすべて台無しにしたかどうか私に知らせてください、私のテストでうまくいきます。また、array型を検出するために私が考えられる唯一の方法は、lengthの存在をチェックすることでした。 Javascriptは実際には配列をオブジェクトとして格納するので、実際には型arrayをチェックすることはできません（そのような型はありません！）。他の誰かがより良い方法を知っているなら、私はそれを聞きたいです。あなたのオブジェクトがlengthという名前のプロパティも持っている場合、この関数は誤ってそれを配列として扱います。
編集：null値のオブジェクトのチェックを追加しました。ありがとうブロックアダムス
編集：以下は無限再帰的なオブジェクトを印刷することができるように固定された機能です。 toSourceは無限再帰を一度出力するので、これはFFからのtoSourceと同じようには出力しません。そこで、この関数は直ちにそれを殺します。この関数は上の関数よりも実行が遅いので、上の関数を編集する代わりにここに追加します。自分自身にリンクするオブジェクトをどこかに渡す予定がある場合にのみ必要です。
const ObjToSource=(o)=> {
if (!o) return null;
let str="",na=0,k,p;
if (typeof(o) == "object") {
if (!ObjToSource.check) ObjToSource.check = new Array();
for (k=ObjToSource.check.length;na<k;na++) if (ObjToSource.check[na]==o) return '{}';
ObjToSource.check.Push(o);
}
k="",na=typeof(o.length)=="undefined"?1:0;
for(p in o){
if (na) k = "'"+p+"':";
if (typeof o[p] == "string") str += k+"'"+o[p]+"',";
else if (typeof o[p] == "object") str += k+ObjToSource(o[p])+",";
else str += k+o[p]+",";
}
if (typeof(o) == "object") ObjToSource.check.pop();
if (na) return "{"+str.slice(0,-1)+"}";
else return "["+str.slice(0,-1)+"]";
}
テスト：
var test1 = new Object();
test1.foo = 1;
test1.bar = 2;
var testobject = new Object();
testobject.run = 1;
testobject.fast = null;
testobject.loop = testobject;
testobject.dup = test1;
console.log(ObjToSource(testobject));
console.log(testobject.toSource());
結果：
{'run':1,'fast':null,'loop':{},'dup':{'foo':1,'bar':2}}
({run:1, fast:null, loop:{run:1, fast:null, loop:{}, dup:{foo:1, bar:2}}, dup:{foo:1, bar:2}})
注：document.bodyを印刷するのはひどい例です。たとえば、toSourceを使用するとFFは空のオブジェクト文字列を出力するだけです。そして上記の関数を使うとき、FFはSecurityError: The operation is insecure.でクラッシュします。そしてChromeはUncaught RangeError: Maximum call stack size exceededでクラッシュします。明らかに、document.bodyは文字列に変換されることを意図していませんでした。大きすぎるため、または特定のプロパティにアクセスするためのセキュリティポリシーに違反しているためです。そうでなければ、私がここで何かをめちゃめちゃにしないでください、教えてください！
私はいつもconsole.log("object will be: ", obj, obj1)。を使っていますこのようにJSONでstringifyを使って回避策をとる必要はありません。
最も簡単な方法：
console.log(obj);
またはメッセージ付き：
console.log("object is: %O", obj);
最初に渡すオブジェクトには、1つ以上のフォーマット指定子を含めることができます。フォーマット指定子はパーセント記号（％）とそれに続く適用するフォーマットを示す文字で構成されます。
オブジェクトをobj = {0:'John', 1:'Foo', 2:'Bar'}と仮定します
印刷オブジェクトの内容
for (var i in obj){
console.log(obj[i], i);
}
コンソール出力（Chrome DevTools）：
John 0
Foo 1
Bar 2
それが役立つことを願っています！
var list = function(object) {
for(var key in object) {
console.log(key);
}
}
objectはあなたのオブジェクトです。
あるいはchrome devツールの "console"タブでこれを使うことができます
console.log(object);
コンソール内にオブジェクトを表示するもう1つの方法はJSON.stringifyです。下記の例をご覧ください。
var gandalf = {
"real name": "Gandalf",
"age (est)": 11000,
"race": "Maia",
"haveRetirementPlan": true,
"aliases": [
"Greyhame",
"Stormcrow",
"Mithrandir",
"Gandalf the Grey",
"Gandalf the White"
]
};
//to console log object, we cannot use console.log("Object gandalf: " + gandalf);
console.log("Object gandalf: ");
//this will show object gandalf ONLY in Google Chrome NOT in IE
console.log(gandalf);
//this will show object gandalf IN ALL BROWSERS!
console.log(JSON.stringify(gandalf));
//this will show object gandalf IN ALL BROWSERS! with beautiful indent
console.log(JSON.stringify(gandalf, null, 4));
単に使う
JSON.stringify(obj)
例
var args_string = JSON.stringify(obj);
console.log(args_string);
または
alert(args_string);
JavaScript関数にも注意してください関数はオブジェクトと見なされます。
実際には、このように新しいプロパティを割り当てることができます
foo.moo = "stackoverflow";
console.log(foo.moo);
Javascript関数
<script type="text/javascript">
function print_r(theObj){
if(theObj.constructor == Array || theObj.constructor == Object){
document.write("<ul>")
for(var p in theObj){
if(theObj[p].constructor == Array || theObj[p].constructor == Object){
document.write("<li>["+p+"] => "+typeof(theObj)+"</li>");
document.write("<ul>")
print_r(theObj[p]);
document.write("</ul>")
} else {
document.write("<li>["+p+"] => "+theObj[p]+"</li>");
}
}
document.write("</ul>")
}
}
</script>
印刷オブジェクト
<script type="text/javascript">
print_r(JAVACRIPT_ARRAY_OR_OBJECT);
</script>
javascriptの print_rを介して
あなたが本当にオブジェクトが何を保持しているのか見たいのであれば、私は最善の解決策はオブジェクトキーを通して、そして次にオブジェクト値を通して見ることであると思います...
console.log(Object.keys(obj));
console.log(Object.values(obj));
のように出力されます。 
（上の写真：オブジェクトに格納されているキー/値）
ECMAScript 2016以降を使用している場合は、この新しいオプションもあります。
Object.keys(obj).forEach(e => console.log(`key=${e} value=${obj[e]}`));
これはきちんとした出力を作り出すでしょう： 
前の答えで述べた解決策：console.log(obj)はあまりにも多くのパラメータを表示し、 は欲しいデータを表示するのに最もユーザーフレンドリーな方法ではありません 。そのため、キーと値を別々に記録することをお勧めします。
次へ
console.table(object)
このようなことをコンソールに出力します。 
最後に私の最も好きではない：
console.log(object)
これを行う方法は次のとおりです。
console.log("%o", obj);
私のプロジェクトで私がコンソールで簡単でスピーディなデバッグをするためにいつも使っている小さなヘルパー関数 Laravelからのインスピレーション。
/**
* @param variable mixed The var to log to the console
* @param varName string Optional, will appear as a label before the var
*/
function dd(variable, varName) {
var varNameOutput;
varName = varName || '';
varNameOutput = varName ? varName + ':' : '';
console.warn(varNameOutput, variable, ' (' + (typeof variable) + ')');
}
使用方法
dd(123.55);の出力：
var obj = {field1: 'xyz', field2: 2016};
dd(obj, 'My Cool Obj');
もう1つのpagewilsコードの変更...彼は文字列以外のものを出力せず、numberとbooleanフィールドを空白のままにして、私はタイプミスをmegabossによって作成された関数のすぐ内側に修正しました。
var print = function( o, maxLevel, level )
{
if ( typeof level == "undefined" )
{
level = 0;
}
if ( typeof maxlevel == "undefined" )
{
maxLevel = 0;
}
var str = '';
// Remove this if you don't want the pre tag, but make sure to remove
// the close pre tag on the bottom as well
if ( level == 0 )
{
str = '<pre>'; // can also be <pre>
}
var levelStr = '<br>';
for ( var x = 0; x < level; x++ )
{
levelStr += ' '; // all those spaces only work with <pre>
}
if ( maxLevel != 0 && level >= maxLevel )
{
str += levelStr + '...<br>';
return str;
}
for ( var p in o )
{
switch(typeof o[p])
{
case 'string':
case 'number': // .tostring() gets automatically applied
case 'boolean': // ditto
str += levelStr + p + ': ' + o[p] + ' <br>';
break;
case 'object': // this is where we become recursive
default:
str += levelStr + p + ': [ <br>' + print( o[p], maxLevel, level + 1 ) + levelStr + ']</br>';
break;
}
}
// Remove this if you don't want the pre tag, but make sure to remove
// the open pre tag on the top as well
if ( level == 0 )
{
str += '</pre>'; // also can be </pre>
}
return str;
};
私はpagewilの印刷方法を使いましたが、とてもうまくいきました。
これは、（ずさんな）インデントと特別なprop/ob区切り文字を使った、少し拡張したバージョンです。
var print = function(obj, delp, delo, ind){
delp = delp!=null ? delp : "\t"; // property delimeter
delo = delo!=null ? delo : "\n"; // object delimeter
ind = ind!=null ? ind : " "; // indent; ind+ind geometric addition not great for deep objects
var str='';
for(var prop in obj){
if(typeof obj[prop] == 'string' || typeof obj[prop] == 'number'){
var q = typeof obj[prop] == 'string' ? "" : ""; // make this "'" to quote strings
str += ind + prop + ': ' + q + obj[prop] + q + '; ' + delp;
}else{
str += ind + prop + ': {'+ delp + print(obj[prop],delp,delo,ind+ind) + ind + '}' + delo;
}
}
return str;
};
これが機能です。
function printObj(obj) {
console.log((function traverse(tab, obj) {
let str = "";
if(typeof obj !== 'object') {
return obj + ',';
}
if(Array.isArray(obj)) {
return '[' + obj.map(o=>JSON.stringify(o)).join(',') + ']' + ',';
}
str = str + '{\n';
for(var p in obj) {
str = str + tab + ' ' + p + ' : ' + traverse(tab+' ', obj[p]) +'\n';
}
str = str.slice(0,-2) + str.slice(-1);
str = str + tab + '},';
return str;
}('',obj).slice(0,-1)))};
タブインデントを使用してオブジェクトを読みやすく表示できます。
JavaScriptオブジェクトのきれいな文字列を返すものを探しているなら、 https://github.com/fresheneesz/beautinator をチェックしてください。例：
var result = beautinator({ "font-size": "26px","font-family": "'Open Sans', sans-serif",color: "white", overflow: "hidden",padding: "4px 4px 4px 8px",Text: { display: "block", width: "100%","text-align": "center", "padding-left": "2px","Word-break": "break-Word"}})
console.log(result)
の結果：
{ "font-size": "26px",
"font-family": "'Open Sans', sans-serif",
color: "white", overflow: "hidden",
padding: "4px 4px 4px 8px",
Text: { display: "block", width: "100%",
"text-align": "center", "padding-left": "2px",
"Word-break": "break-Word"
}
}
あなたのオブジェクトに関数がある場合でもそれは機能します。
オブジェクトの内容を表示する簡単な方法は、次に示すようにconsole.logを使用することです。
console.log("Object contents are ", obj);
オブジェクトを連結するために '+'を使用していないことに注意してください。私が '+'を使った場合、私はobjectの場合にのみ文字列表現を取得するでしょう。
明確なオブジェクトフォーマットを得るためにはconsole.tableを使うのが好きです。
const obj = {name: 'Alireza', family: 'Dezfoolian', gender: 'male', netWorth: "$0"};
そして、あなたは以下のようなきちんとした読みやすいテーブルを見るでしょう： 
これを試してください：
var object = this.window;
console.log(object,'this is window object');
出力：
ブラウザでは機能しません。オブジェクトの有効なJS表現を取得し、JSONを取得したくない場合にのみ必要となる場合があります。ノードインライン評価を実行するだけです
var execSync = require('child_process').execSync
const objectToSource = (obj) =>
execSync('node -e \'console.log(JSON.parse(`' + JSON.stringify(obj) + '`))\'', { encoding: 'utf8' })
console.log(objectToSource({ a: 1 }))