JavaScript オブジェクトを表示するにはどうすればよいですか?

Question

JavaScript オブジェクトの内容を次のように文字列形式で表示するにはどうすればよいですか? alert 変数？

同じ書式設定された方法でオブジェクトを表示したいと思います。

Answer 1

デバッグの目的でオブジェクトを印刷したい場合は、コードを使用します：

var obj = {prop1: 'prop1Value', prop2: 'prop2Value', child: {childProp1: 'childProp1Value'}}
console.log(obj)

意志表示：

の

注：あなた必要があります。ののみのオブジェクトをログに記録します。たとえば、これは動作しません。

console.log('My object : ' + obj)

Answer 2

ネイティブJSON.stringifyメソッドを使用します。 ネストされたオブジェクトおよびすべての主要なブラウザ、この方法のサポートで動作します。

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.)

<時間> あなたの場合は、

カスタム JSON.stringify代用するを使用します

このJavaScriptエラーが発生しました

"Uncaught TypeError: Converting circular structure to JSON"

Answer 3

var output = '';
for (var property in object) {
  output += property + ': ' + object[property]+'; ';
}
alert(output);

Answer 4

console.dir(object)ます：

  

は、指定されたJavaScriptオブジェクトのプロパティのインタラクティブなリストを表示します。このリストは、あなたが子オブジェクトの内容を調べるために開示三角形を使用することができます。

console.dir()機能は非標準であることに注意してください。 の MDNのWebドキュメントを参照してください。 P>

Answer 5

これを試してみてください

console.log(JSON.stringify(obj))

このオブジェクトの文字列化バージョンを表示します。だからではなく、出力として[object]のオブジェクトの内容を取得します。

Answer 6

さて、Firefoxの（詳細な情報については、@Bojanglesのおかげで）持ってい<のhref = "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/toSource" のrel JSONとObject.toSource()としてオブジェクトを印刷= "noreferrer"> function(){} の方法。

これは、ほとんどのデバッグ目的のために十分です、私は推測します。

Answer 7

あなたがオブジェクトを印刷するには、アラートを使用したい場合は、あなたがこれを行うことができます：

alert("myObject is " + myObject.toSource());

これは、各プロパティと文字列形式でそれに対応する値を出力する必要があります。

Answer 8

NodeJSでは、 util.inspect(obj)するを使用して、オブジェクトを印刷することができます。深さを述べるようにしてくださいまたはあなただけのオブジェクトの浅いプリントを持っています。

Answer 9

あなたが使用できる表形式のデータをご覧になりたい方

console.table(obj);

あなたは、テーブルの列をクリックすると、表を並べ替えることができます。

また、表示するためにどのような列を選択することができます：

console.table(obj, ['firstName', 'lastName']);

あなたはhref="https://blog.mariusschulz.com/2013/11/13/advanced-javascript-debugging-with-consoletable">ここの

Answer 10

関数：

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: 'wilson@hotmail.com',
        tel: '123456789'
    }  
}

$('body').append( print(myObject) );

例：

http://jsfiddle.net/WilsonPage/6eqMn/

Answer 11

最高と私が見つけた最も簡単な方法は、

だった前にそれが言われたとおり

var getPrintObject=function(object)
{
    return JSON.stringify(object);
}

Answer 12

これを使用します：

console.log('print object: ' + JSON.stringify(session));

Answer 13

おまけとして色で、のNode.jsのの持つ完全なオブジェクトを印刷するには

console.dir(object, {depth: null, colors: true})

色はもちろん、「深さ：ヌル」オプションです。完全なオブジェクトを印刷します。

のオプションがブラウザでサポートされていないようです。

参考ます：

https://developer.mozilla.org/en-米国/ドキュメント/ウェブ/ API /コンソール/ DIRする

https://nodejs.org/api/console.html#console_console_dir_obj_optionsする

Answer 14

あなたはその全長のオブジェクトを印刷したい場合、使用することができます。

  

はconsole.log（） 'UTIL'（必要検査（OBJ、{showHidden：偽、深さ：NULL}）

あなたは、文字列に変換することにより、オブジェクトを印刷したい場合は、

  

はconsole.log（JSON.stringify（OBJ））;

Answer 15

(これは私のライブラリに追加されました GitHub)

ここで車輪の再発明が始まります！これらの解決策はどれも私の状況には役に立ちませんでした。そこで、私はすぐにペイジウィルの答えを改ざんしました。これは、(コンソールやテキストフィールドなどを介して) 画面に印刷するためのものではありません。ただし、これはデータ転送用です。このバージョンでは、次と非常によく似た結果が返されるようです。 toSource(). 。試したことはありません JSON.stringify, 、しかし、これはほぼ同じことだと思います。この関数の結果は、有効な Javascript オブジェクト宣言です。

このようなものが既に SO のどこかにあるかどうかは疑問ではありませんが、過去の回答を検索するのに時間を費やすよりも、作成する方が短かっただけです。この質問は、私がこれについて検索し始めたときに Google で一番ヒットした質問でした。ここに載せておけば他の人にも役立つかもしれないと思いました。

いずれにしても、オブジェクトにオブジェクトや配列が埋め込まれている場合や、それらのオブジェクトや配列にさらにオブジェクトや配列が埋め込まれている場合でも、この関数の結果はオブジェクトの文字列表現になります。（お酒が好きだと聞きましたが？それで、あなたの車にクーラーを入れました。そして、私はあなたのクーラーをクーラーでポンピングしました。つまり、クーラーは涼しい状態で飲み物を飲むことができます。）

配列は次のように保存されます [] の代わりに {} したがって、キーと値のペアはなく、値のみが存在します。通常の配列と同様です。したがって、配列と同様に作成されます。

また、すべての文字列 (キー名を含む) は引用符で囲まれていますが、それらの文字列に特殊文字 (スペースやスラッシュなど) が含まれていない限り、これは必要ありません。しかし、そうでなければまだ正常に機能するいくつかの引用符を削除するためだけにこれを検出する気はありませんでした。

この結果の文字列は次のように使用できます。 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 は無限再帰を 1 回出力しますが、この関数はそれを即座に強制終了します。この関数は上記の関数よりも実行が遅いため、自分自身にリンクするオブジェクトをどこかに渡す場合にのみ必要となるため、上記の関数を編集する代わりにここに追加します。

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 ひどい例です。まず、FF は使用時に空のオブジェクト文字列を出力するだけです。 toSource. 。上記の関数を使用すると、FF がクラッシュします。 SecurityError: The operation is insecure.. 。そしてChromeはクラッシュします Uncaught RangeError: Maximum call stack size exceeded. 。明らかに、 document.body 文字列に変換されることを意図したものではありませんでした。大きすぎるか、特定のプロパティにアクセスするにはセキュリティ ポリシーに違反するためです。ここで何か間違えていない限り、教えてください。

Answer 16

私は、再帰的に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: 'wilson@hotmail.com',
        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) ); 

Answer 17

単に使用

JSON.stringify(obj)

例

var args_string = JSON.stringify(obj);
console.log(args_string);

または

alert(args_string);

また、JavaScriptの機能に注意をオブジェクトとして考えられている。

実際には、あなたがこのように新しいプロパティを割り当てることができます。

foo.moo = "stackoverflow";
console.log(foo.moo);

Answer 18

注意:これらの例では、yourObj は調査するオブジェクトを定義します。

まず、私があまり好きではないものの、最もよく利用されているオブジェクトの表示方法から説明します。

これはオブジェクトの内容を表示する事実上の方法です

console.log(yourObj)

次のようなものが生成されます:

最善の解決策は、オブジェクトのキーを調べてから、オブジェクトが保持しているものを本当に確認したい場合はオブジェクトの値を調べることだと思います...

console.log(Object.keys(yourObj));
console.log(Object.values(yourObj));

次のようなものが出力されます:(上の写真:オブジェクトに保存されているキー/値)

ECMAScript 2016 以降を使用している場合は、次の新しいオプションもあります。

Object.keys(yourObj).forEach(e => console.log(`key=${e}  value=${yourObj[e]}`));

これにより、きちんとした出力が生成されます。以前の回答で述べた解決策: console.log(yourObj) 表示されるパラメーターが多すぎるため、 必要なデータを表示する最もユーザーフレンドリーな方法ではありません. 。このため、キーと値を別々にログに記録することをお勧めします。

次は：

console.table(yourObj)

以前のコメントで誰かがこれを提案しましたが、私にとってはうまくいきませんでした。他の人が別のブラウザなどで動作した場合は、賞賛に値します。参考までにコードをここに載せておきます。次のような内容がコンソールに出力されます。

Answer 19

ここでそれを行う方法です。

console.log("%o", obj);

Answer 20

最も簡単な方法：

console.log(obj);

やメッセージ付きます：

console.log("object is: %O", obj);

あなたが合格最初のオブジェクトは、1つのまたは複数の書式指定子を含めることができます。形式指定子を適用する書式を示す文字が続くパーセント記号（％）から構成されている。

詳細フォーマット指定する

Answer 21

私はいつもconsole.log("object will be: ", obj, obj1)を使用しています。 この方法は、私はJSONを文字列化して回避策を行う必要はありません。 オブジェクトのすべてのプロパティがきれいに拡大されます。

Answer 22

コンソール内のオブジェクトを表示する別の方法は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));

Answer 23

var list = function(object) {
   for(var key in object) {
     console.log(key);
   }
}

objectがあなたのオブジェクトである。ここで、

か、「コンソール」タブ、クロームのdevのツールでこれを使用することができます：

console.log(object);

Answer 24

と仮定オブジェクトobj = {0:'John', 1:'Foo', 2:'Bar'}

印刷オブジェクトの内容

for (var i in obj){
    console.log(obj[i], i);
}

コンソール出力（クロームデベロッパーツール）：

John 0
Foo 1
Bar 2

助け

希望！

Answer 25

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

Answer 26

私は常にコンソール経由でシンプル、迅速なデバッグのための私のプロジェクトで使用小さなヘルパー関数。  インスピレーションは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'); 

" ここに画像の説明を入力する

Answer 27

私は明確なオブジェクト形式を取得するためconsole.tableを使用して好むので、あなたは、このオブジェクトを持っている想像します：

const obj = {name: 'Alireza', family: 'Dezfoolian', gender: 'male', netWorth: "$0"};

そして、あなたは、あなたがこの以下のようにきちんとして読みやすい表が表示されます。 の

Answer 28

私はpagewilのprintメソッドを使用し、それは非常にうまく働きました。

ここで（ずさん）インデントと明確な小道具/ 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;
};

Answer 29

pagewilsコードの別の修飾は...彼は文字列以外のものをプリントアウトしていないと、ブランク数とブールフィールドを残して、私はちょうどmegabossによって作成された関数内二typeof演算のタイプミスを修正します。

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;
};

Answer 30

ここで機能だ。

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)))};

これは、読みやすさと、タブのインデントを使用してオブジェクトを表示することができます。