Bir JavaScript nesnesinin içeriğini, alertbir değişkendeki gibi dize biçiminde nasıl görüntülerim ?

Aynı biçimlendirilmiş yolu bir nesneyi görüntülemek istiyorum.

Nesneyi hata ayıklama amacıyla yazdırmak istiyorsanız, kodu kullanın:

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

gösterecek:

Not: yalnızca nesneyi günlüğe kaydetmeniz gerekir . Örneğin, bu işe yaramaz:

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

Not ' : logYöntemde virgül de kullanabilirsiniz , daha sonra çıktının ilk satırı dize olur ve bundan sonra nesne oluşturulur:

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

Yerel JSON.stringifyyöntemi kullanın . Yuvalanmış nesnelerle çalışır ve tüm büyük tarayıcılar bu yöntemi destekler .

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

Link Mozilla API Başvurusu ve diğer örnekler.

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

Bu Javascript hatasıyla karşılaşırsanız özel bir JSON.stringify ikamesi kullanın

"Uncaught TypeError: Converting circular structure to JSON"

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

console.dir(object):

Belirtilen bir JavaScript nesnesinin özelliklerinin etkileşimli bir listesini görüntüler. Bu liste, alt nesnelerin içeriklerini incelemek için açıklama üçgenlerini kullanmanızı sağlar.

Not console.dir()özelliği olmayan standarttır. MDN Web Belgelerine Bakın

bunu dene :

console.log(JSON.stringify(obj))

Bu, nesnenin stringify sürümünü yazdırır. Böylece [object]çıktı olarak nesnenin içeriğini alacaksınız.

Firefox (ayrıntılı bilgi için @Bojangles sayesinde) Object.toSource()nesneleri JSON vefunction(){} .

Çoğu hata ayıklama amacı için yeterli, sanırım.

Uyarıyı kullanmak istiyorsanız, nesnenizi yazdırmak için şunları yapabilirsiniz:

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

Her özelliği ve karşılık gelen değerini dize biçiminde yazdırmalıdır.

Verileri tablo biçiminde görmek istiyorsanız kullanabilirsiniz

console.table(obj);

Tablo sütununa tıklarsanız tablo sıralanabilir.

Hangi sütunların gösterileceğini de seçebilirsiniz:

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

Console.table hakkında daha fazla bilgiyi burada bulabilirsiniz

NodeJS'de kullanarak bir nesneyi yazdırabilirsiniz util.inspect(obj). Derinliği belirttiğinizden emin olun, aksi takdirde yalnızca nesnenin sığ bir baskısına sahip olursunuz.

İşlev:

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

Kullanımı:

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

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

Misal:

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

Basitçe kullanın

JSON.stringify(obj)

Misal

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

Veya

alert(args_string);

Ayrıca, javascript işlevlerinde not nesne olarak kabul edilir.

Ek bir not olarak:

Aslında böyle yeni bir özellik atayabilir ve ona console.log dosyasına erişebilir veya uyarıda görüntüleyebilirsiniz

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

Bunu kullan:

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

En iyi ve en basit şekilde bulduğum gibi söyledim

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

Nesneyi Node.js ile renklerle bonus olarak yazdırmak için :

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

Renkler elbette isteğe bağlıdır, 'derinlik: boş' tüm nesneyi yazdıracaktır.

Seçenekler tarayıcılarda desteklenmiyor gibi görünüyor.

Referanslar:

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

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

Not: Bu örneklerde Objeniz incelemek istediğiniz nesneyi tanımlar.

Öncelikle bir nesneyi görüntüleme için en az kullandığım ama en çok kullandığım yol:

Bu, bir nesnenin içeriğini göstermenin kesin yoludur

console.log(yourObj)

şöyle bir şey üretecek:

Sanırım en iyi çözüm, Nesnelerin Tuşları'na ve sonra nesnenin ne tuttuğunu görmek istiyorsanız Nesne Değerleri'ne bakmaktır ...

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

Aşağıdaki gibi bir çıktı verir: (yukarıda resmedilmiştir: nesnede saklanan anahtarlar / değerler)

ECMAScript 2016 veya daha yenisini kullanıyorsanız bu yeni seçenek de vardır:

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

Bu düzgün çıktı üretecektir: Önceki bir cevapta bahsedilen çözüm: console.log(yourObj)çok fazla parametre görüntüler ve istediğiniz verileri görüntülemenin en kullanıcı dostu yolu değildir . Bu yüzden anahtarları ve değerleri ayrı ayrı günlüğe kaydetmenizi öneririm.

Sıradaki:

console.table(yourObj)

Daha önceki bir yorumda biri bunu önerdi, ancak benim için hiç işe yaramadı. Farklı bir tarayıcıda veya başka bir şeyde başka biri için işe yararsa, kudos! Hala referans için kodu koyacağım! Konsola böyle bir şey çıktılar:

(Bu GitHub'daki kütüphaneme eklendi )

Burada tekerleği yeniden icat etmek! Bu çözümlerin hiçbiri benim durumum için işe yaramadı. Bu yüzden çabucak wilsonpage'in cevabını doktora yazdım . Bu, ekrana yazdırmak için değildir (konsol, metin alanı veya herhangi bir şey yoluyla). Bu durumlarda iyi çalışıyor ve OP'nin istediği gibi çalışıyor alert. Buradaki birçok yanıt alertOP'nin istediği gibi kullanılmıyor . Her neyse, Ancak, veri aktarımı için biçimlendirilmiştir. Bu sürüm çok benzer bir sonuç döndürüyor gibi görünüyor toSource(). Test JSON.stringifyetmedim, ama bunun aynı şey olduğunu varsayıyorum. Bu sürüm daha çok bir poli-fil gibidir, böylece herhangi bir ortamda kullanabilirsiniz. Bu işlevin sonucu, geçerli bir Javascript nesnesi bildirimidir.

Böyle bir şey zaten SO bir yerde olsaydı şüphe etmem, ama geçmiş cevapları ararken bir süre harcamak daha yapmak için daha kısa oldu. Ve bu soru, bu konuda arama yapmaya başladığımda google'daki en iyi hitim olduğu için; Buraya koymak başkalarına yardımcı olabilir düşündüm.

Her neyse, bu fonksiyonun sonucu, nesneniz gömülü nesneler ve diziler olsa bile ve bu nesneler veya diziler daha da gömülü nesneler ve diziler içeriyor olsa bile, nesnenizin bir dize temsili olacaktır. (İçki içmeyi sevdiğini duydum? Yani, arabanı bir soğutucu ile püskürttüm. Ve sonra, soğutucunu bir soğutucu ile püskürttüm. Böylece, soğutucun senin serinken içebilir.)

Diziler []yerine ile depolanır{} ve bu nedenle anahtar / değer çiftlerine değil, sadece değerlere sahiptir. Normal diziler gibi. Bu nedenle, diziler gibi yaratılırlar.

Ayrıca, tüm dize (anahtar adları dahil) alıntılanmıştır, bu dizelerde özel karakterler (boşluk veya eğik çizgi gibi) olmadığı sürece bu gerekli değildir. Ancak, sadece hala işe yarayacak bazı tırnak kaldırmak için bunu tespit etmek gibi hissetmedim.

Bu sonuçtaki dize daha sonra evaldize manipülasyonu ile kullanılabilir ya da sadece dize manipülasyonu ile boşaltılabilir. Böylece, nesnenizi metinden yeniden oluşturun.

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

Her şeyi berbat edersem bana bildirin, testlerimde iyi çalışıyor. Ayrıca, türü algılamayı düşünebildiğim tek yol arrayvarlığını kontrol etmekti length. Javascript gerçekten nesneleri nesne olarak depoladığından, aslında türü kontrol edemiyorum array(böyle bir tür yok!). Başka biri daha iyi bir yol bilirse, duymak isterim. Çünkü, nesnenizde ayrıcalength bu işlev yanlışlıkla bir dizi olarak ele alınır.

EDIT: Boş değerli nesneler için kontrol eklendi. Teşekkürler Brock Adams

EDIT: Sonsuz özyinelemeli nesneler yazdırabilmek için sabit fonksiyon aşağıdadır. Bu, toSourceFF ile aynı toSourceşekilde yazdırılmaz, çünkü sonsuz özyinelemeyi bir kez yazdıracak, burada bu işlev hemen öldürecektir. Bu işlev yukarıdaki işlevden daha yavaş çalışır, bu yüzden yukarıdaki işlevi düzenlemek yerine buraya ekliyorum, çünkü yalnızca kendilerine, bir yere geri bağlanan nesneleri iletmeyi planlıyorsanız gereklidir.

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

Ölçek:

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

Sonuç:

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

NOT: Yazdırmaya çalışmak document.bodykorkunç bir örnektir. Birincisi, FF kullanırken boş bir nesne dizesi yazdırır toSource. Ve yukarıdaki işlevi kullanırken, FF kilitlenir SecurityError: The operation is insecure.. Ve Chrome kilitlenecek Uncaught RangeError: Maximum call stack size exceeded. Açıkçası, document.bodydizeye dönüştürülmek istememişti. Çünkü ya çok büyük, ya da belirli özelliklere erişmek için güvenlik politikasına aykırı. Burada bir şey batırmadıkça, anlat!

Nesneyi tam uzunlukta yazdırmak isterseniz,

console.log (zorunlu ('util'). denetle (obj, {showHidden: yanlış, derinlik: boş})

Nesneyi dizeye dönüştürerek yazdırmak istiyorsanız

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

İşte bunu yapmanın bir yolu:

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

Pagewil'in cevabı verilen nesneyi özyinelemeli olarak yazdırmanın bir yoluna ihtiyacım vardı (Teşekkürler!). Belli bir seviyeye kadar yazdırmanın bir yolunu dahil etmek ve daha fazla okunabilir olması için bulunduğumuz seviyeye göre düzgün bir şekilde girintilemek için boşluk eklemek için biraz güncelledim.

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

Kullanımı:

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

Ben her zaman kullanırım console.log("object will be: ", obj, obj1). Bu şekilde JSON ile stringify ile geçici çözüm yapmak gerekmez. Nesnenin tüm özellikleri güzelce genişletilecektir.

Konsol içindeki nesneleri görüntülemenin başka bir yolu da JSON.stringify. Aşağıdaki örneği inceleyin:

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 İşlevi

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

Baskı Nesnesi

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

Javascript ile print_r aracılığıyla

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

nerede objectsenin nesnedir

ya da chrome dev tools, "console" sekmesinde kullanabilirsiniz:

console.log(object);

Nesneyi varsay obj = {0:'John', 1:'Foo', 2:'Bar'}

Nesnenin içeriğini yazdırma

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

Konsol çıkışı (Chrome DevTools):

John 0
Foo 1
Bar 2

Umarım yardımcı olur!

console.tableNet nesne formatı almak için kullanmayı tercih ederim , bu yüzden bu nesneye sahip olduğunuzu hayal edin:

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

Ve aşağıdaki gibi düzgün ve okunabilir bir tablo göreceksiniz:

Konsol aracılığıyla basit, hızlı hata ayıklama için projelerimde her zaman kullandığım küçük bir yardımcı işlev. İlham Laravel'den alınmıştır.

/**
 * @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) + ')');
}

kullanım

dd(123.55); çıktılar:

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

Bir JavaScript nesnesinin içeriğini dize biçiminde görüntülemek için ES6 şablon değişmez kavramını da kullanabilirsiniz.

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

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

Pagewil'in yazdırma yöntemini kullandım ve çok güzel çalıştı.

İşte (özensiz) girintiler ve farklı prop / ob sınırlayıcıları ile biraz genişletilmiş sürümü:

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 kodunun başka bir modifikasyonu ... onun dizelerden başka bir şey yazdırmıyor ve sayı ve boolean alanlarını boş bırakıyor ve yazım hatalarını megaboss tarafından yaratılan fonksiyonun içindeki ikinci tipte sabitledim.

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

İşte işlevi.

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

Okunabilirliği olan sekme girintisini kullanarak nesneyi gösterebilir.