Come posso visualizzare un object JavaScript?

Come posso visualizzare il contenuto di un object JavaScript in un formato stringa come quando alert una variabile?

Lo stesso modo in cui voglio visualizzare un object.

Con Firefox

Se si desidera stampare l’object per scopi di debug, suggerisco invece di installare Firebug per Firefox e utilizzare il codice:

 console.log(obj) 

Con Chrome

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

mostrerà

screenshot console chrome

Nota: è necessario solo registrare l’object. Ad esempio questo non funzionerà:

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

Usa il metodo nativo JSON.stringify . Funziona con oggetti nidificati e tutti i principali browser supportano questo metodo.

 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 a Mozilla API Reference e altri esempi.

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

Usa un sostituto JSON.stringify personalizzato se riscontri questo errore Javascript

 "Uncaught TypeError: Converting circular structure to JSON" 
 var output = ''; for (var property in object) { output += property + ': ' + object[property]+'; '; } alert(output); 

console.dir(object) :

Visualizza un elenco interattivo delle proprietà di un object JavaScript specificato. Questo elenco consente di utilizzare i triangoli di apertura per esaminare il contenuto degli oggetti figlio.

Si noti che la funzione console.dir() non è standard. Vedi MDN Web Docs

prova questo :

 console.log(JSON.stringify(obj)) 

Questo stamperà la versione stringify dell’object. Quindi invece di [object] come output otterrai il contenuto dell’object.

Bene, Firefox (grazie a @Bojangles per informazioni dettagliate) ha il metodo Object.toSource() che stampa oggetti come JSON e function(){} .

Questo è sufficiente per la maggior parte degli scopi di debug, suppongo.

Se vuoi usare l’avviso, per stampare il tuo object, puoi farlo:

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

Dovrebbe stampare ogni proprietà e il suo valore corrispondente in formato stringa.

Funzione:

 var print = function(o){ var str=''; for(var p in o){ if(typeof o[p] == 'string'){ str+= p + ': ' + o[p]+'; '; }else{ str+= p + ': { ' + print(o[p]) + '}'; } } return str; } 

Uso:

 var myObject = { name: 'Wilson Page', contact: { email: 'wilson@hotmail.com', tel: '123456789' } } $('body').append( print(myObject) ); 

Esempio:

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

In NodeJS puoi stampare un object usando util.inspect(obj) . Assicurati di specificare la profondità o avrai solo una stampa superficiale dell’object.

Se vuoi vedere i dati in formato tabellare puoi usare

 console.table(obj); 

La tabella può essere ordinata se si fa clic sulla colonna della tabella.

Puoi anche selezionare quali colonne mostrare:

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

Puoi trovare ulteriori informazioni su console.table qui

Come è stato detto prima il modo migliore e più semplice che ho trovato è stato

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

Per stampare l’object completo con Node.js con i colors come bonus:

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

I colors sono ovviamente opzionali, ‘depth: null’ stamperà l’object completo.

Le opzioni non sembrano essere supportate nei browser.

Riferimenti:

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

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

Usa questo:

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

Se si desidera stampare l’object della sua intera lunghezza, può utilizzare

console.log (require (‘util’). inspect (obj, {showHidden: false, depth: null})

Se si desidera stampare l’object convertendolo nella stringa, quindi

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

Avevo bisogno di un modo per stampare ricorsivamente l’object, che ha fornito la risposta di pagewil (Grazie!). L’ho aggiornato un po ‘per includere un modo per stampare fino a un certo livello e per aggiungere spaziatura in modo che fosse rientrato correttamente in base al livello corrente in cui ci troviamo, in modo che sia più leggibile.

 // 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 = '
'; } var levelStr = ''; for ( var x = 0; x < level; x++ ) { levelStr += ' '; } if ( maxLevel != 0 && level >= maxLevel ) { str += levelStr + '...'; return str; } for ( var p in o ) { if ( typeof o[p] == 'string' ) { str += levelStr + p + ': ' + o[p] + ' '; } else { str += levelStr + p + ': { ' + print( o[p], maxLevel, level + 1 ) + levelStr + '}'; } } // 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 += '

'; } return str; };

Uso:

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

(Questo è stato aggiunto alla mia libreria su GitHub )

Reinventare la ruota qui! Nessuna di queste soluzioni ha funzionato per la mia situazione. Così, ho rapidamente aggiustato la risposta di pagewil. Questo non è per la stampa sullo schermo (tramite console, o campo di testo o qualsiasi altra cosa). È, tuttavia, per il trasporto di dati. Questa versione sembra restituire un risultato molto simile a toSource() . Non ho provato JSON.stringify , ma presumo che si tratti della stessa cosa. Il risultato di questa funzione è una dichiarazione di object Javascript valida.

Non dubiterei se qualcosa del genere fosse già su SO da qualche parte, ma è stato solo più breve per farlo piuttosto che passare un po ‘alla ricerca di risposte precedenti. E poiché questa domanda è stata la mia migliore hit su google quando ho iniziato a cercare su questo; Ho pensato che metterlo qui potesse aiutare gli altri.

Ad ogni modo, il risultato di questa funzione sarà una rappresentazione in formato stringa del tuo object, anche se il tuo object ha oggetti e matrici incorporati, e anche se quegli oggetti o matrici hanno anche ulteriori oggetti e matrici incorporate. (Ho sentito che ti piace bere? Così, ho sfruttato la tua auto con un dispositivo di raffreddamento. E poi, ho sfruttato il tuo dispositivo di raffreddamento con un dispositivo di raffreddamento. Così, il tuo dispositivo di raffreddamento può bere, mentre sei fresco.)

Le matrici sono archiviate con [] invece di {} e quindi non hanno coppie chiave / valore, solo valori. Come gli array regolari. Pertanto, vengono creati come fanno gli array.

Inoltre, tutte le stringhe (compresi i nomi delle chiavi) sono quotate, questo non è necessario a meno che quelle stringhe abbiano caratteri speciali (come uno spazio o una barra). Ma non mi sentivo di doverlo rilevare solo per rimuovere alcune virgolette che altrimenti funzionerebbero comunque bene.

Questa stringa risultante può quindi essere usata con eval o semplicemente scaricata in una var attraverso la manipolazione delle stringhe. Quindi, ricreando nuovamente il tuo object, dal testo.

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

Fammi sapere se ho incasinato tutto, funziona bene nei miei test. Inoltre, l’unico modo in cui potevo pensare di rilevare l’ array tipo era controllare la presenza della length . Perché Javascript memorizza veramente gli array come oggetti, non posso controllare per tipo array (non esiste un tale tipo!). Se qualcun altro conosce un modo migliore, mi piacerebbe sentirlo. Perché, se il tuo object ha anche una proprietà denominata length questa funzione la tratterà erroneamente come una matrice.

EDIT: Aggiunto controllo per oggetti con valore null. Grazie Brock Adams

MODIFICA: sotto è la funzione fissa per essere in grado di stampare oggetti ricorsivi infinitamente. Questo non stampa come toSource da FF perché toSource stamperà la ricorsione infinita una volta, dove, come, questa funzione lo ucciderà immediatamente. Questa funzione è più lenta di quella precedente, quindi la aggiungo qui invece di modificare la funzione precedente, poiché è necessaria solo se si pianifica di passare da qualche parte gli oggetti che si collegano a se stessi.

 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 

Test:

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

Risultato:

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

NOTA: provare a stampare document.body è un esempio terribile. Per esempio, FF stampa semplicemente una stringa di object vuota quando si usa toSource . E quando si utilizza la funzione di cui sopra, FF si blocca su SecurityError: The operation is insecure. . E Chrome si Uncaught RangeError: Maximum call stack size exceeded anomalo su Uncaught RangeError: Maximum call stack size exceeded . Chiaramente, document.body non è stato pensato per essere convertito in stringa. Perché è troppo big o contro la politica di sicurezza per accedere a determinate proprietà. A meno che non abbia incasinato qualcosa qui, dillo!

Uso sempre console.log("object will be: ", obj, obj1) . in questo modo non ho bisogno di fare la soluzione con stringify con JSON. Tutte le proprietà dell’object saranno espanse bene.

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

dove l’ object è il tuo object

oppure puoi usarlo negli strumenti di chrome dev, nella scheda “console”:

console.log(object);

Assumi object obj = {0:'John', 1:'Foo', 2:'Bar'}

Stampa il contenuto dell’object

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

Output della console (Chrome DevTools):

 John 0 Foo 1 Bar 2 

Spero possa aiutare!

Il modo più semplice:

 console.log(obj); 

O con un messaggio:

 console.log("object is: %O", obj); 

Il primo object che passi può contenere uno o più identificatori di formato. Un identificatore di formato è composto dal segno di percentuale (%) seguito da una lettera che indica la formattazione da applicare.

Altri specificatori di formato

Funzione Javascript

  

Oggetto di stampa

  

via print_r in Javascript

Una piccola funzione di aiuto che utilizzo sempre nei miei progetti per il debugging semplice e veloce tramite la console. Ispirazione presa da 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) + ')'); } 

uso

dd(123.55); uscite:
inserisci la descrizione dell'immagine qui

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

inserisci la descrizione dell'immagine qui

Ho usato il metodo di stampa di pagewil e ha funzionato molto bene.

ecco la mia versione leggermente estesa con rientri (sciatti) e distinti delimitatori 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; }; 

Un’altra modifica del codice pagewils … il suo non stampa nulla di diverso dalle stringhe e lascia vuoti i campi numerici e booleani e ho corretto l’errore di battitura sul secondo tipo di appena all’interno della funzione come creato da 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 = '
'; // can also be 
 } var levelStr = '
'; for ( var x = 0; x < level; x++ ) { levelStr += ' '; // all those spaces only work with
 } if ( maxLevel != 0 && level >= maxLevel ) { str += levelStr + '...
'; 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] + '
'; break; case 'object': // this is where we become recursive default: str += levelStr + p + ': [
' + print( o[p], maxLevel, level + 1 ) + levelStr + ']'; 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 += '

'; // also can be } return str; };

probabilmente stai cercando questo

console.dir ()

Ecco la funzione.

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

Può mostrare oggetti usando il rientro tab con leggibilità.

Ecco un modo per farlo:

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

Se stai cercando qualcosa che possa restituire una stringa preziosa di qualsiasi object javascript, consulta https://github.com/fresheneesz/beautinator . Un esempio:

 var result = beautinator({ "font-size": "26px","font-family": "'Open Sans', sans-serif",color: "white", overflow: "hidden",padding: "4px 4px 4px 8px",Text: { display: "block", width: "100%","text-align": "center", "padding-left": "2px","word-break": "break-word"}}) console.log(result) 

Risultati in:

 { "font-size": "26px", "font-family": "'Open Sans', sans-serif", color: "white", overflow: "hidden", padding: "4px 4px 4px 8px", Text: { display: "block", width: "100%", "text-align": "center", "padding-left": "2px", "word-break": "break-word" } } 

Funziona anche se ci sono funzioni nel tuo object.

Un altro modo di visualizzare oggetti all’interno della console è con JSON.stringify . Leggi l’esempio seguente:

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

Puoi usare la mia funzione.
Chiama questa funzione con un array o una stringa o un object che avvisa il contenuto.

Funzione

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

uso

 var data = [1, 2, 3, 4]; print_r(data);