Bagaimana cara menampilkan konten objek JavaScript dalam format string seperti saat kami alertvariabel?

Cara diformat yang sama saya ingin menampilkan objek.

Jika Anda ingin mencetak objek untuk keperluan debugging, gunakan kode:

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

akan ditampilkan:

Catatan: Anda hanya harus mencatat objek. Misalnya, ini tidak akan berfungsi:

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

Catatan ' : Anda juga dapat menggunakan koma dalam logmetode, maka baris pertama dari output akan menjadi string dan setelah itu objek akan di-render:

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

Gunakan JSON.stringifymetode asli . Bekerja dengan objek bersarang dan semua browser utama mendukung metode ini.

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

Tautan ke Referensi API Mozilla dan contoh lainnya.

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

Gunakan custom JSON.stringify replacer jika Anda menemukan kesalahan Javascript ini

"Uncaught TypeError: Converting circular structure to JSON"

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

console.dir(object):

Menampilkan daftar interaktif dari properti objek JavaScript yang ditentukan. Daftar ini memungkinkan Anda menggunakan segitiga pengungkapan untuk memeriksa konten objek anak.

Perhatikan bahwa console.dir()fitur ini tidak standar. Lihat Dokumen Web MDN

coba ini :

console.log(JSON.stringify(obj))

Ini akan mencetak versi objek yang dikencangkan. Jadi alih-alih [object]sebagai output Anda akan mendapatkan konten objek.

Yah, Firefox (terima kasih kepada @Bojangles untuk informasi terperinci) memiliki Object.toSource()metode yang mencetak objek seperti JSON dan function(){}.

Itu cukup untuk sebagian besar keperluan debugging, saya kira.

Jika Anda ingin menggunakan lansiran, untuk mencetak objek Anda, Anda dapat melakukan ini:

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

Ini harus mencetak setiap properti dan nilai yang sesuai dalam format string.

Jika Anda ingin melihat data dalam format tabel yang dapat Anda gunakan

console.table(obj);

Tabel dapat diurutkan jika Anda mengklik kolom tabel.

Anda juga dapat memilih kolom apa yang akan ditampilkan:

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

Anda dapat menemukan informasi lebih lanjut tentang console.table di sini

Di NodeJS Anda dapat mencetak objek dengan menggunakan util.inspect(obj). Pastikan untuk menyatakan kedalamannya atau Anda hanya akan memiliki cetakan objek yang dangkal.

Fungsi:

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

Pemakaian:

var myObject = {
    name: 'Wilson Page',
    contact: {
        email: 'wilson@hotmail.com',
        tel: '123456789'
    }  
}

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

Contoh:

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

Cukup gunakan

JSON.stringify(obj)

Contoh

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

Atau

alert(args_string);

Juga, catatan dalam fungsi javascript dianggap sebagai objek.

Sebagai catatan tambahan:

Sebenarnya Anda dapat menetapkan properti baru seperti ini dan mengaksesnya console.log atau menampilkannya dalam peringatan

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

Gunakan ini:

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

Seperti yang dikatakan sebelumnya yang terbaik dan cara paling sederhana yang saya temukan adalah

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

Untuk mencetak objek lengkap dengan Node.js dengan warna sebagai bonus:

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

Warna tentu saja opsional, 'kedalaman: null' akan mencetak objek penuh.

Opsi tampaknya tidak didukung di browser.

Referensi:

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

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

NB: Dalam contoh-contoh ini, yourObj mendefinisikan objek yang ingin Anda periksa.

Pertama cara paling tidak favorit saya namun paling banyak digunakan untuk menampilkan objek:

Ini adalah cara defacto untuk menampilkan konten suatu objek

console.log(yourObj)

akan menghasilkan sesuatu seperti:

Saya pikir solusi terbaik adalah dengan melihat melalui Objects Keys, dan kemudian melalui Nilai Objects jika Anda benar-benar ingin melihat apa yang dipegang objek ...

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

Ini akan menampilkan sesuatu seperti: (gambar di atas: kunci / nilai yang disimpan dalam objek)

Ada juga opsi baru ini jika Anda menggunakan ECMAScript 2016 atau lebih baru:

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

Ini akan menghasilkan output yang rapi: Solusi yang disebutkan dalam jawaban sebelumnya: console.log(yourObj)menampilkan terlalu banyak parameter dan bukan cara yang paling ramah pengguna untuk menampilkan data yang Anda inginkan . Itu sebabnya saya merekomendasikan kunci logging dan kemudian nilai secara terpisah.

Selanjutnya :

console.table(yourObj)

Seseorang dalam komentar sebelumnya menyarankan yang ini, namun itu tidak berhasil bagi saya. Jika itu berfungsi untuk orang lain di peramban lain atau sesuatu, maka kudos! Saya masih meletakkan kode di sini untuk referensi! Akan menampilkan sesuatu seperti ini ke konsol:

(Ini telah ditambahkan ke perpustakaan saya di GitHub )

Menemukan kembali roda di sini! Tak satu pun dari solusi ini bekerja untuk situasi saya. Jadi, saya cepat-cepat memperbaiki jawaban wilsonpage . Yang ini bukan untuk mencetak ke layar (melalui konsol, atau bidang teks atau apa pun). Ini berfungsi dengan baik dalam situasi itu dan berfungsi dengan baik seperti yang diminta OP alert. Banyak jawaban di sini tidak membahas menggunakan alertseperti yang diminta OP. Bagaimanapun, itu diformat untuk transportasi data. Versi ini tampaknya mengembalikan hasil yang sangat mirip toSource(). Saya belum diuji JSON.stringify, tetapi saya menganggap ini tentang hal yang sama. Versi ini lebih seperti poli-fil sehingga Anda dapat menggunakannya di lingkungan apa pun. Hasil dari fungsi ini adalah deklarasi objek Javascript yang valid.

Saya tidak akan ragu jika sesuatu seperti ini sudah ada di SO di suatu tempat, tapi itu lebih singkat untuk membuatnya daripada menghabiskan waktu mencari jawaban masa lalu. Dan karena pertanyaan ini adalah top hit saya di google ketika saya mulai mencari tentang ini; Saya pikir meletakkannya di sini mungkin bisa membantu orang lain.

Bagaimanapun, hasil dari fungsi ini akan menjadi representasi string dari objek Anda, bahkan jika objek Anda telah menyematkan objek dan array, dan bahkan jika objek atau array tersebut memiliki objek dan array yang tertanam lebih jauh. (Aku mendengarmu suka minum? Jadi, aku merapikan mobilmu dengan pendingin. Dan kemudian, aku merapikan pendinginmu dengan pendingin. Jadi, pendinginmu bisa minum, sementara kamu menjadi dingin.)

Array disimpan dengan []alih - alih {}dan karenanya tidak memiliki pasangan kunci / nilai, hanya nilai. Seperti array biasa. Oleh karena itu, mereka dibuat seperti array lakukan.

Juga, semua string (termasuk nama kunci) dikutip, ini tidak perlu kecuali string tersebut memiliki karakter khusus (seperti spasi atau garis miring). Tapi, saya tidak merasa ingin mendeteksi ini hanya untuk menghapus beberapa tanda kutip yang mungkin masih berfungsi dengan baik.

String yang dihasilkan ini kemudian dapat digunakan dengan evalatau hanya membuangnya ke var melalui manipulasi string. Dengan demikian, buat kembali objek Anda lagi, dari teks.

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)+"]";
}

Beri tahu saya jika saya mengacaukan semuanya, berfungsi dengan baik dalam pengujian saya. Juga, satu-satunya cara saya bisa memikirkan untuk mendeteksi tipe arrayadalah untuk memeriksa keberadaan length. Karena Javascript benar-benar menyimpan array sebagai objek, saya tidak dapat benar-benar memeriksa tipe array(tidak ada tipe seperti itu!). Jika ada orang lain yang tahu cara yang lebih baik, saya akan senang mendengarnya. Karena, jika objek Anda juga memiliki properti bernama lengthmaka fungsi ini keliru akan memperlakukannya sebagai array.

EDIT: Menambahkan cek untuk objek bernilai nol. Terima kasih Brock Adams

EDIT: Di bawah ini adalah fungsi tetap untuk dapat mencetak objek rekursif tanpa batas. Ini tidak mencetak sama seperti toSourcedari FF karena toSourceakan mencetak rekursi tak terbatas satu kali, sedangkan, fungsi ini akan membunuhnya segera. Fungsi ini berjalan lebih lambat daripada yang di atas, jadi saya menambahkannya di sini alih-alih mengedit fungsi di atas, karena hanya diperlukan jika Anda berencana untuk meneruskan objek yang menghubungkan kembali ke diri mereka sendiri, di suatu tempat.

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)+"]";
}

Uji:

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

Hasil:

{'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}})

CATATAN: Mencoba mencetak document.bodyadalah contoh yang mengerikan. Untuk satu, FF hanya mencetak string objek kosong saat menggunakan toSource. Dan ketika menggunakan fungsi di atas, FF crash SecurityError: The operation is insecure.. Dan Chrome akan mogok Uncaught RangeError: Maximum call stack size exceeded. Jelas, document.bodyitu tidak dimaksudkan untuk dikonversi menjadi string. Karena terlalu besar, atau menentang kebijakan keamanan untuk mengakses properti tertentu. Kecuali, saya mengacaukan sesuatu di sini, katakan!

Jika Anda ingin mencetak objek yang panjangnya penuh, bisa digunakan

console.log (membutuhkan ('util'). inspect (obj, {showHidden: false, depth: null})

Jika Anda ingin mencetak objek dengan mengubahnya ke string lalu

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

Inilah cara untuk melakukannya:

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

Saya membutuhkan cara untuk mencetak objek secara rekursif, yang diberikan jawaban pagewil (Terima kasih!). Saya memperbaruinya sedikit untuk memasukkan cara untuk mencetak hingga tingkat tertentu, dan untuk menambahkan spasi sehingga benar-benar indentasi berdasarkan tingkat saat ini kita berada sehingga lebih mudah dibaca.

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

Pemakaian:

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

Saya selalu menggunakan console.log("object will be: ", obj, obj1). dengan cara ini saya tidak perlu melakukan solusi dengan menggunakan JSON. Semua properti objek akan diperluas dengan baik.

Cara lain untuk menampilkan objek dalam konsol adalah dengan JSON.stringify. Lihat contoh di bawah ini:

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

Fungsi 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>

Objek pencetakan

<script type="text/javascript">
print_r(JAVACRIPT_ARRAY_OR_OBJECT);
</script> 

via print_r dalam Javascript

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

dimana objectobjekmu

atau Anda dapat menggunakan ini di alat dev chrome, tab "konsol":

console.log(object);

Asumsikan objek obj = {0:'John', 1:'Foo', 2:'Bar'}

Cetak konten objek

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

Output konsol (Chrome DevTools):

John 0
Foo 1
Bar 2

Semoga itu bisa membantu!

Saya lebih suka menggunakan console.tableuntuk mendapatkan format objek yang jelas, jadi bayangkan Anda memiliki objek ini:

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

Dan Anda akan melihat tabel yang rapi dan mudah dibaca seperti di bawah ini:

Fungsi pembantu kecil yang selalu saya gunakan dalam proyek saya untuk debugging sederhana dan cepat melalui konsol. Inspirasi diambil dari 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) + ')');
}

Pemakaian

dd(123.55); output:

var obj = {field1: 'xyz', field2: 2016};
dd(obj, 'My Cool Obj'); 

Anda juga dapat menggunakan konsep literal template ES6 untuk menampilkan konten objek JavaScript dalam format string.

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

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

saya menggunakan metode cetak pagewil, dan itu bekerja dengan sangat baik.

di sini adalah versi saya yang sedikit diperpanjang dengan indentasi (ceroboh) dan pembatas prop / ob yang berbeda:

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

Modifikasi lain dari kode pagewils ... nya tidak mencetak apa pun selain string dan meninggalkan angka dan bidang boolean kosong dan saya memperbaiki kesalahan ketik pada typeof kedua tepat di dalam fungsi yang dibuat oleh 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;
};

Inilah fungsinya.

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

Itu dapat menampilkan objek menggunakan indentasi tab dengan keterbacaan.