web-dev-qa-db-ja.com

JavaScriptオブジェクトの内容を印刷する

通常、alert(object);を使用すると、[object Object]として表示されます。 JavaScriptでオブジェクトのすべてのコンテンツパラメータを印刷する方法

javascriptobject
394
cometta

Firefoxを使用している場合、alert(object.toSource())は単純なデバッグ目的には十分です。

309
Lukman

これは、インデントされたJSONオブジェクトを使用して、とても素敵な出力を得ます。

alert(JSON.stringify(YOUR_OBJECT_HERE, null, 4));

2番目の引数は、文字列を返す前に内容を変更します。 3番目の引数は、読みやすくするために空白として使用するスペースの数を指定します。

677
Igor Jerosimić

デバッガを使用する以外に、foreachループを使用してオブジェクトのすべての要素にアクセスすることもできます。次のprintObject関数は、すべてのプロパティとそれぞれの値を表示しているオブジェクトにalert()する必要があります。

function printObject(o) {
  var out = '';
  for (var p in o) {
    out += p + ': ' + o[p] + '\n';
  }
  alert(out);
}

// now test it:
var myObject = {'something': 1, 'other thing': 2};
printObject(myObject);

DOMインスペクションツールを使用すると、オブジェクトそのものであるプロパティの下でDigを実行できるため、望ましい方法です。 FirefoxにはFireBugがありますが、他のすべての主要なブラウザ（IE、Chrome、Safari）にもデバッグツールが組み込まれているので確認する必要があります。

72
Miguel Ventura

単にオブジェクトの文字列表現を取得したい場合は、 JSONライブラリ を使用してJSON.stringify関数を使用できます。

25
CMS

使用できるオブジェクトの内容を印刷する

console.log(obj_str);

あなたは以下のようにコンソールで結果を見ることができます。

Object {description: "test"}

ChromeブラウザでF12キーを押すと、コンソールタブがデバッグモードになります。

13
Nikunj K.

Nodeの util.inspect（object） でオブジェクトの構造を表示できます。

あなたのオブジェクトが循環的な依存関係を持っているとき、それは特に役に立ちます。

$ node

var obj = {
   "name" : "John",
   "surname" : "Doe"
}
obj.self_ref = obj;

util = require("util");

var obj_str = util.inspect(obj);
console.log(obj_str);
// prints { name: 'John', surname: 'Doe', self_ref: [Circular] }

その場合JSON.stringifyは例外を投げます：TypeError: Converting circular structure to JSON

10
Michal

JavaScriptのデバッグには FireBug の使用を検討してください。それはあなたが対話的にあなたのすべての変数を調べることを可能にし、さらには関数をステップスルーすることを可能にするでしょう。

8
Jonathan Feinberg

Dir（object）を使用してください。あるいは、 Firebug for Firefox （本当に役に立つ）をいつでもダウンロードできます。

7
OverLex

みんなのJavascript！

String.prototype.repeat = function(num) {
    if (num < 0) {
        return '';
    } else {
        return new Array(num + 1).join(this);
    }
};

function is_defined(x) {
    return typeof x !== 'undefined';
}

function is_object(x) {
    return Object.prototype.toString.call(x) === "[object Object]";
}

function is_array(x) {
    return Object.prototype.toString.call(x) === "[object Array]";
}

/**
 * Main.
 */
function xlog(v, label) {
    var tab = 0;

    var rt = function() {
        return '    '.repeat(tab);
    };

    // Log Fn
    var lg = function(x) {
        // Limit
        if (tab > 10) return '[...]';
        var r = '';
        if (!is_defined(x)) {
            r = '[VAR: UNDEFINED]';
        } else if (x === '') {
            r = '[VAR: EMPTY STRING]';
        } else if (is_array(x)) {
            r = '[\n';
            tab++;
            for (var k in x) {
                r += rt() + k + ' : ' + lg(x[k]) + ',\n';
            }
            tab--;
            r += rt() + ']';
        } else if (is_object(x)) {
            r = '{\n';
            tab++;
            for (var k in x) {
                r += rt() + k + ' : ' + lg(x[k]) + ',\n';
            }
            tab--;
            r += rt() + '}';
        } else {
            r = x;
        }
        return r;
    };

    // Space
    document.write('\n\n');

    // Log
    document.write('< ' + (is_defined(label) ? (label + ' ') : '') + Object.prototype.toString.call(v) + ' >\n' + lg(v));
};



// Demo //

var o = {
    'aaa' : 123,
    'bbb' : 'zzzz',
    'o' : {
        'obj1' : 'val1',
        'obj2' : 'val2',
        'obj3' : [1, 3, 5, 6],
        'obj4' : {
            'a' : 'aaaa',
            'b' : null
        }
    },
    'a' : [ 'asd', 123, false, true ],
    'func' : function() {
        alert('test');
    },
    'fff' : false,
    't' : true,
    'nnn' : null
};

xlog(o, 'Object'); // With label
xlog(o); // Without label

xlog(['asd', 'bbb', 123, true], 'ARRAY Title!');

var no_definido;
xlog(no_definido, 'Undefined!');

xlog(true);

xlog('', 'Empty String');
3
Eduardo Cuomo

Jsonデータを文字列データに変更するには、 http://www.json.org/js.html からjson.jsを使用できます。

2
hay

プロトタイプの中であなたのオブジェクトに独自のtoStringメソッドを与えることができます。

2
kennebec

PrototypeのObject.inspect（）メソッドを使用することもできます。これは「オブジェクトのデバッグ指向の文字列表現を返す」です。

http://api.prototypejs.org/language/Object/inspect/

2
snw

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

関数

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);
1
Rayiez

Internet Explorer 8には、Firefox用の Firebug に似た開発者ツールがあります。 OperaにはOpera DragonFlyがあり、Google ChromeにもDeveloper Tools（Shift + Ctrl + J）というものがあります。

IE6-8でJavaScriptをデバッグするためのより詳細な回答は、次のとおりです。 IE8の 'Developer Tools'を使用して以前のバージョンをデバッグするIE versions

0
gregers