ฉันจะแสดงเนื้อหาของวัตถุ JavaScript ในรูปแบบสตริงเช่นเดียวกับเมื่อเราalertเป็นตัวแปรได้อย่างไร

รูปแบบเดียวกับที่ฉันต้องการแสดงวัตถุ

หากคุณต้องการพิมพ์วัตถุเพื่อการดีบักให้ใช้รหัส:

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

จะแสดง:

หมายเหตุ:คุณต้องเพียงเข้าสู่ระบบวัตถุ ตัวอย่างเช่นสิ่งนี้จะไม่ทำงาน:

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

หมายเหตุ ' : คุณยังสามารถใช้เครื่องหมายจุลภาคในlogเมธอดจากนั้นบรรทัดแรกของเอาต์พุตจะเป็นสตริงและหลังจากนั้นวัตถุจะถูกเรนเดอร์:

console.log('My object: ', obj);

ใช้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 Referenceและตัวอย่างอื่น ๆ

obj = JSON.parse(str); // Reverses above operation (Just in case if needed.)

ใช้JSON.stringify replacer ที่กำหนดเองหากคุณพบข้อผิดพลาด Javascript นี้

"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 Docs

ลองนี้:

console.log(JSON.stringify(obj))

สิ่งนี้จะพิมพ์วัตถุรุ่น stringify ดังนั้นแทนที่จะ[object]เป็นเอาท์พุทคุณจะได้รับเนื้อหาของวัตถุ

ดี Firefox (ขอบคุณ @Bojangles สำหรับข้อมูลรายละเอียด) มีObject.toSource()วิธีการที่พิมพ์วัตถุเป็น JSON และfunction(){}และ

นั่นก็เพียงพอแล้วสำหรับการแก้ไขจุดบกพร่องส่วนใหญ่ฉันเดา

หากคุณต้องการใช้การเตือนเพื่อพิมพ์วัตถุของคุณคุณสามารถทำได้:

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

ควรพิมพ์แต่ละคุณสมบัติและค่าที่เกี่ยวข้องในรูปแบบสตริง

หากคุณต้องการดูข้อมูลในรูปแบบตารางคุณสามารถใช้

console.table(obj);

สามารถเรียงตารางได้หากคุณคลิกที่คอลัมน์ตาราง

นอกจากนี้คุณยังสามารถเลือกคอลัมน์ที่จะแสดง:

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

คุณสามารถค้นหาข้อมูลเพิ่มเติมเกี่ยวกับ console.table ได้ที่นี่

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

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

ตัวอย่าง:

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

เพียงใช้

JSON.stringify(obj)

ตัวอย่าง

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

หรือ

alert(args_string);

นอกจากนี้โน้ตในฟังก์ชั่นจาวาสคริปต์ก็ถือเป็นวัตถุ

ในฐานะโน้ตเสริม:

ที่จริงคุณสามารถกำหนดคุณสมบัติใหม่เช่นนี้และเข้าถึง console.log หรือแสดงในการแจ้งเตือน

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

ใช้สิ่งนี้:

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

อย่างที่บอกไว้ก่อนหน้านี้ว่าดีที่สุดและวิธีที่ง่ายที่สุดที่ฉันพบคือ

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

หากต้องการพิมพ์วัตถุทั้งหมดด้วยNode.js ที่มีสีเป็นโบนัสให้ทำดังนี้

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

แน่นอนว่าสีเป็นตัวเลือก 'ความลึก: null' จะพิมพ์วัตถุแบบเต็ม

ตัวเลือกที่ดูเหมือนจะไม่ได้รับการสนับสนุนในเบราว์เซอร์

อ้างอิง:

https://developer.mozilla.org/en-US/docs/Web/API/Console/dir

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

หมายเหตุ: ในตัวอย่างเหล่านี้ yourObj จะกำหนดวัตถุที่คุณต้องการตรวจสอบ

ก่อนอื่นให้ใช้วิธีการแสดงวัตถุที่เป็นที่ชื่นชอบน้อยที่สุดและยังใช้มากที่สุด:

นี่คือวิธี defacto ในการแสดงเนื้อหาของวัตถุ

console.log(yourObj)

จะผลิตสิ่งที่ชอบ:

ฉันคิดว่าทางออกที่ดีที่สุดคือการมองผ่าน Objects Keys และผ่าน Objects Values ​​หากคุณต้องการดูว่าวัตถุนั้นถืออะไร ...

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)

มีคนในความคิดเห็นก่อนหน้านี้แนะนำสิ่งนี้ แต่มันก็ไม่ได้ผลสำหรับฉัน ถ้ามันใช้งานได้กับคนอื่นในเบราว์เซอร์ที่แตกต่างกันหรือสิ่งอื่นใดให้รุ่งโรจน์! ฉันยังคงใส่รหัสที่นี่เพื่อการอ้างอิง! จะส่งออกบางสิ่งเช่นนี้ไปยังคอนโซล:

(สิ่งนี้ถูกเพิ่มไปยังห้องสมุดของฉันที่GitHub )

คิดค้นล้อใหม่ที่นี่! การแก้ปัญหาเหล่านี้ไม่ได้ผลกับสถานการณ์ของฉัน ดังนั้นฉันจึงรีบตอบคำสั่งของwilsonpageอย่างรวดเร็ว อันนี้ไม่ได้สำหรับการพิมพ์ไปที่หน้าจอ (ผ่านทางคอนโซลหรือฟิลด์ข้อความหรืออะไรก็ตาม) มันจะปรับการทำงานในสถานการณ์เหล่านั้นและทำงานได้ดีเป็น OP alertที่ร้องขอสำหรับ คำตอบมากมายที่นี่ไม่ได้ใช้alertตามที่ร้องขอ อย่างไรก็ตามมันเป็นรูปแบบสำหรับการขนส่งข้อมูล toSource()รุ่นนี้ดูเหมือนว่าจะกลับมาเป็นผลที่คล้ายกันเป็นอย่างมาก ฉันไม่ได้ทดสอบJSON.stringifyแต่ฉันคิดว่านี่เป็นเรื่องเดียวกัน รุ่นนี้เหมือนโพลีฟิลเพื่อให้คุณสามารถใช้งานได้ในทุกสภาพแวดล้อม ผลลัพธ์ของฟังก์ชั่นนี้คือการประกาศวัตถุจาวาสคริปต์ที่ถูกต้อง

ฉันไม่สงสัยเลยว่าบางอย่างเช่นนี้มีอยู่แล้วในบางแห่ง แต่มันสั้นกว่าที่จะทำมากกว่าการใช้เวลาสักครู่เพื่อค้นหาคำตอบที่ผ่านมา และเนื่องจากคำถามนี้เป็นที่นิยมที่สุดของฉันใน google เมื่อฉันเริ่มค้นหาเกี่ยวกับเรื่องนี้; ฉันคิดว่าการวางไว้ที่นี่อาจช่วยผู้อื่นได้

อย่างไรก็ตามผลลัพธ์จากฟังก์ชั่นนี้จะเป็นตัวแทนสตริงของวัตถุของคุณแม้ว่าวัตถุของคุณจะมีวัตถุและอาร์เรย์ฝังตัวอยู่และแม้ว่าวัตถุหรืออาร์เรย์เหล่านั้นจะมีวัตถุและอาร์เรย์ฝังตัวอยู่ก็ตาม (ฉันได้ยินว่าคุณชอบดื่มหรือเปล่าดังนั้นฉันก็เลยเก็บรถของคุณด้วยเครื่องทำความเย็นแล้วฉันก็นำเครื่องทำความเย็นของคุณไปเก็บความเย็นของคุณด้วยดังนั้นเครื่องทำความเย็นของคุณสามารถดื่มได้ในขณะที่คุณกำลังเย็นสบาย)

อาร์เรย์จะถูกเก็บไว้ด้วย[]แทน{}ดังนั้นจึงไม่มีคู่คีย์ / ค่าเพียงค่า เหมือนอาร์เรย์ปกติ ดังนั้นพวกมันจึงถูกสร้างขึ้นเหมือนอาร์เรย์

นอกจากนี้สตริงทั้งหมด (รวมถึงชื่อคีย์) ถูกอ้างถึงสิ่งนี้ไม่จำเป็นยกเว้นว่าสตริงเหล่านั้นมีอักขระพิเศษ (เช่นช่องว่างหรือเครื่องหมายทับ) แต่ฉันไม่รู้สึกอยากตรวจจับสิ่งนี้เพียงเพื่อลบเครื่องหมายคำพูดบางอย่างที่จะยังใช้ได้ดีอยู่

สตริงที่เป็นผลลัพธ์นี้สามารถใช้กับevalหรือเพียงแค่ทิ้งลงในการจัดการสตริง var thru ดังนั้นการสร้างวัตถุของคุณใหม่อีกครั้งจากข้อความ

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แล้วฟังก์ชั่นนี้จะถือว่ามันผิดพลาดเป็นอาร์เรย์

แก้ไข: เพิ่มการตรวจสอบวัตถุที่มีค่าว่าง ขอบคุณ Brock Adams

แก้ไข: ด้านล่างเป็นฟังก์ชั่นคงที่เพื่อให้สามารถพิมพ์วัตถุซ้ำซ้ำอย่างไม่มีที่สิ้นสุด สิ่งนี้ไม่ได้พิมพ์เหมือนกับtoSourceFF เนื่องจาก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เป็นตัวอย่างที่น่ากลัว สำหรับหนึ่ง FF toSourceเพียงแค่พิมพ์สตริงวัตถุที่ว่างเปล่าเมื่อใช้ และเมื่อใช้ฟังก์ชั่นด้านบนจะเกิดปัญหา FF SecurityError: The operation is insecure.ขึ้น และ Chrome Uncaught RangeError: Maximum call stack size exceededจะผิดพลาดใน เห็นได้ชัดdocument.bodyว่าไม่ได้ตั้งใจจะแปลงเป็นสตริง เนื่องจากมีขนาดใหญ่เกินไปหรือขัดต่อนโยบายความปลอดภัยเพื่อเข้าถึงคุณสมบัติบางอย่าง ถ้าฉันทำบางสิ่งบางอย่างที่นี่อย่าบอก!

หากคุณต้องการพิมพ์วัตถุที่มีความยาวเต็มสามารถใช้งานได้

console.log (ต้องการ ('util') ตรวจสอบ (obj, {showHidden: false, depth: null})

หากคุณต้องการพิมพ์วัตถุโดยแปลงเป็นสตริงแล้ว

console.log (JSON.stringify (obj));

นี่คือวิธีที่จะทำ:

console.log("%o", 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: '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) ); 

console.log("object will be: ", obj, obj1)ฉันมักจะใช้ วิธีนี้ฉันไม่จำเป็นต้องทำวิธีแก้ปัญหาด้วย stringify กับ JSON คุณสมบัติทั้งหมดของวัตถุจะถูกขยายอย่างสวยงาม

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

ฟังก์ชั่น 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> 

ผ่านprint_r ใน Javascript

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

objectวัตถุของคุณอยู่ที่ไหน

หรือคุณสามารถใช้สิ่งนี้ในเครื่องมือ dev ของ Chrome แท็บ "คอนโซล":

console.log(object);

สมมติว่าวัตถุ 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

หวังว่าจะช่วย!

ฉันชอบที่จะใช้console.tableสำหรับการจัดรูปแบบวัตถุที่ชัดเจนดังนั้นจินตนาการว่าคุณมีวัตถุนี้:

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

และคุณจะเห็นตารางที่เรียบร้อยและอ่านได้เช่นนี้ด้านล่าง:

ฟังก์ชั่นตัวช่วยเล็ก ๆ ที่ฉันใช้ในโครงการของฉันเพื่อการดีบักอย่างง่าย ๆ และรวดเร็วผ่านคอนโซล แรงบันดาลใจนำมาจาก 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'); 

คุณยังสามารถใช้แนวคิดที่แท้จริงของเทมเพลต ES6 เพื่อแสดงเนื้อหาของวัตถุ JavaScript ในรูปแบบสตริง

alert(`${JSON.stringify(obj)}`);

const obj  = {
  "name" : "John Doe",
  "habbits": "Nothing",
};
alert(`${JSON.stringify(obj)}`);

ฉันใช้วิธีการพิมพ์ของ 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;
};

การปรับเปลี่ยนรหัส pagewils อื่น ... เขาไม่ได้พิมพ์อะไรนอกจากสตริงและปล่อยให้ฟิลด์หมายเลขและบูลีนว่างเปล่าและฉันแก้ไขการพิมพ์ผิดในประเภทที่สองที่อยู่ภายในฟังก์ชันตามที่สร้างโดย 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;
};

นี่คือฟังก์ชั่น

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

มันสามารถแสดงวัตถุโดยใช้แท็บเยื้องกับการอ่าน