alert変数の場合のように、JavaScript オブジェクトのコンテンツを文字列形式で表示するにはどうすればよいですか?
オブジェクトを表示したいのと同じフォーマットの方法。
2152104 次
40 に答える
2231
ネイティブ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()
MozillaAPIリファレンスおよびその他の例へのリンク。
obj = JSON.parse(str); // Reverses above operation (Just in case if needed.)
このJavascriptエラーが発生した場合は、カスタムJSON.stringifyリプレースメントを使用してください
"Uncaught TypeError: Converting circular structure to JSON"
于 2010-11-27T17:52:28.970 に答える
1272
デバッグ目的でオブジェクトを出力する場合は、次のコードを使用します。
var obj = {
prop1: 'prop1Value',
prop2: 'prop2Value',
child: {
childProp1: 'childProp1Value',
},
}
console.log(obj)
表示されます:
注:オブジェクトのみをログに記録する必要があります。たとえば、これは機能しません。
console.log('My object : ' + obj)
注 ' : メソッドでコンマを使用することもできます。そのlog場合、出力の最初の行が文字列になり、その後、オブジェクトがレンダリングされます。
console.log('My object: ', obj);
于 2009-06-05T19:15:48.860 に答える
412
var output = '';
for (var property in object) {
output += property + ': ' + object[property]+'; ';
}
alert(output);
于 2009-06-05T19:18:30.087 に答える
91
これを試して ：
console.log(JSON.stringify(obj))
これにより、オブジェクトの stringify バージョンが出力されます。したがって[object]、出力としてではなく、オブジェクトのコンテンツを取得します。
于 2015-08-12T07:53:47.263 に答える
68
さて、Firefox (詳細については @Bojangles に感謝) にはObject.toSource()、オブジェクトを JSON および として出力するメソッドがありますfunction(){}。
ほとんどのデバッグ目的にはこれで十分だと思います。
于 2009-06-05T19:04:08.603 に答える
53
alert を使用してオブジェクトを印刷する場合は、次のようにします。
alert("myObject is " + myObject.toSource());
各プロパティとそれに対応する値を文字列形式で出力する必要があります。
于 2010-09-09T07:15:44.117 に答える
41
表形式でデータを表示したい場合は、使用できます
console.table(obj);
表の列をクリックすると、表を並べ替えることができます。
表示する列を選択することもできます。
console.table(obj, ['firstName', 'lastName']);
console.table の詳細については、こちらを参照してください。
于 2015-03-26T12:43:54.193 に答える
37
働き：
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) );
例：
于 2011-11-16T14:37:07.170 に答える
37
NodeJS では、 を使用してオブジェクトを印刷できますutil.inspect(obj)。必ず深さを記載してください。そうしないと、オブジェクトの浅い印刷しかできません。
于 2013-07-15T06:35:25.593 に答える
22
NB: In these examples, yourObj defines the object you want to examine.
First off my least favorite yet most utilized way of displaying an object:
This is the defacto way of showing the contents of an object
console.log(yourObj)
will produce something like :
I think the best solution is to look through the Objects Keys, and then through the Objects Values if you really want to see what the object holds...
console.log(Object.keys(yourObj));
console.log(Object.values(yourObj));
It will output something like :
(pictured above: the keys/values stored in the object)
There is also this new option if you're using ECMAScript 2016 or newer:
Object.keys(yourObj).forEach(e => console.log(`key=${e} value=${yourObj[e]}`));
This will produce neat output :
The solution mentioned in a previous answer: console.log(yourObj) displays too many parameters and is not the most user friendly way to display the data you want. That is why I recommend logging keys and then values separately.
Next up :
console.table(yourObj)
Someone in an earlier comment suggested this one, however it never worked for me. If it does work for someone else on a different browser or something, then kudos! Ill still put the code here for reference!
Will output something like this to the console :
于 2018-10-19T12:29:57.417 に答える
18
前に言われたように、私が見つけた最善かつ最も簡単な方法は
var getPrintObject=function(object)
{
return JSON.stringify(object);
}
于 2014-10-08T13:57:54.720 に答える
16
（これはGitHubの私のライブラリに追加されました）
ここで車輪の再発明！これらの解決策はどれも私の状況ではうまくいきませんでした。それで、私はすぐにウィルソンページの答えを調べました。これは、画面に印刷するためのものではありません（コンソール、テキストフィールドなどを介して）。これらの状況では正常に機能し、OPが要求したとおりに正常に機能しalertます。alertここでの多くの回答は、OPが要求したように使用することを扱っていません。とにかく、しかし、それはデータ転送用にフォーマットされています。このバージョンは、と非常によく似た結果を返すよう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、無限再帰を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のはひどい例です。1つは、FFを使用すると、空のオブジェクト文字列を出力するだけtoSourceです。また、上記の関数を使用すると、FFがでクラッシュしSecurityError: The operation is insecure.ます。そしてChromeはでクラッシュしUncaught RangeError: Maximum call stack size exceededます。明らかに、document.body文字列に変換することを意図したものではありません。大きすぎるか、特定のプロパティにアクセスするにはセキュリティポリシーに違反しているためです。私がここで何かを台無しにしない限り、教えてください！
于 2012-12-12T14:36:54.430 に答える
11
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) );
于 2012-08-08T23:42:34.453 に答える
5
オブジェクトを想定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
それが役立つことを願っています!
于 2016-08-02T16:15:09.647 に答える
5
var list = function(object) {
for(var key in object) {
console.log(key);
}
}
あなたのオブジェクトはどこobjectですか
または、Chrome 開発ツールの「コンソール」タブでこれを使用できます。
console.log(object);
于 2015-02-05T18:24:17.977 に答える
2
私は 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;
};
于 2013-03-27T19:52:06.490 に答える
2
pagewils コードの別の変更... 彼は文字列以外は何も出力せず、数値フィールドとブールフィールドを空白のままにし、megaboss によって作成された関数のすぐ内側の 2 番目の 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;
};
于 2016-07-26T12:24:27.437 に答える
2
循環参照ソリューション
循環参照を含む重複参照 (多くの場所で同じオブジェクトへの参照) を含むオブジェクトから冗長な情報を含まない文字列を作成するには、次のようにreplacer (スニペットで提示) を使用JSON.stringifyします。
let s = JSON.stringify(obj, refReplacer(), 4);
function refReplacer() {
let m = new Map(), v= new Map(), init = null;
return function(field, value) {
let p= m.get(this) + (Array.isArray(this) ? `[${field}]` : '.' + field);
let isComplex= value===Object(value)
if (isComplex) m.set(value, p);
let pp = v.get(value)||'';
let path = p.replace(/undefined\.\.?/,'');
let val = pp ? `#REF:${pp[0]=='[' ? '$':'$.'}${pp}` : value;
!init ? (init=value) : (val===init ? val="#REF:$" : 0);
if(!pp && isComplex) v.set(value, path);
return val;
}
}
// ---------------
// TEST
// ---------------
// gen obj with duplicate references
let a = { a1: 1, a2: 2 };
let b = { b1: 3, b2: "4" };
let obj = { o1: { o2: a }, b, a }; // duplicate reference
a.a3 = [1,2,b]; // circular reference
b.b3 = a; // circular reference
let s = JSON.stringify(obj, refReplacer(), 4);
console.log(s);
alert(s);これに基づくこのソリューション( 詳細情報)は、各オブジェクト値に対してJSONPathのようなパスを作成し、同じオブジェクトが 2 回#REF:$.bar.arr[3].foo(またはそれ以上) 発生した場合は、このパスの参照を使用してそのオブジェクトを参照します。$オブジェクト (冗長性が低い)
ボーナス：反転
function parseRefJSON(json) {
let objToPath = new Map();
let pathToObj = new Map();
let o = JSON.parse(json);
let traverse = (parent, field) => {
let obj = parent;
let path = '#REF:$';
if (field !== undefined) {
obj = parent[field];
path = objToPath.get(parent) + (Array.isArray(parent) ? `[${field}]` : `${field?'.'+field:''}`);
}
objToPath.set(obj, path);
pathToObj.set(path, obj);
let ref = pathToObj.get(obj);
if (ref) parent[field] = ref;
for (let f in obj) if (obj === Object(obj)) traverse(obj, f);
}
traverse(o);
return o;
}
// ------------
// TEST
// ------------
let s = `{
"o1": {
"o2": {
"a1": 1,
"a2": 2,
"a3": [
1,
2,
{
"b1": 3,
"b2": "4",
"b3": "#REF:$.o1.o2"
}
]
}
},
"b": "#REF:$.o1.o2.a3[2]",
"a": "#REF:$.o1.o2"
}`;
console.log('Open Chrome console to see nested fields');
let obj = parseRefJSON(s);
console.log(obj);于 2020-05-10T11:04:22.427 に答える
2
ここに機能があります。
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)))};
タブのインデントを使用して読みやすくオブジェクトを表示できます。
于 2017-06-11T12:26:18.707 に答える
-2
for...inカスタム、ホスト、ネイティブ、または CSSOM オブジェクトから離れて取り組みたい場合は特に、シンプルでは問題を解決できないようです。さらに、ここではデバッグについて話しているので、いつどこでデバッグが必要になるかは誰にもわかりません!
私の小さなライブラリは、次のようなオブジェクトを処理できます。
obj2
|__ foo = 'bar'
|__ loop2 = obj2
| :
|__ another = obj1
|__ a1 = 1
|__ b1 = 'baz'
|__ loop1 = obj1
| :
|__ c1 = true
|__ d1 = ''
|__ e1 = [1,2,3]
それらをカラフルに、次のような ID で提示します。
- 0、フー、「バー」
- 0、loop2、「インデックス 0 のオブジェクトへの循環参照が含まれています」
- 0、別の「オブジェクト」
- 1、a1、1
- 1、b1、「バズ」
- 1、ループ 1、「インデックス 2 のオブジェクトへの循環参照が含まれています」
- 1、c1、「真」
- 1、d1、''
- 1、e1、[1,2,3]
しかし、そこを参照してください：
いくつかの予防措置を講じてもdocument.body解析されます!
于 2013-11-29T00:26:58.920 に答える
-2
私の機能を使用することができます。
内容を警告する配列、文字列、またはオブジェクトを指定してこの関数を呼び出します。
関数
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);
于 2013-07-07T13:18:27.583 に答える