Come posso visualizzare un oggetto JavaScript?
https://stackoverflow.com/questions/957537
-
12-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Come posso visualizzare il contenuto di un oggetto JavaScript in un formato stringa come quando we alert una variabile?
Nello stesso modo formattato in cui voglio visualizzare un oggetto.
Soluzione
Se si desidera stampare l'oggetto a scopo di debug, utilizzare il codice:
var obj = {prop1: 'prop1Value', prop2: 'prop2Value', child: {childProp1: 'childProp1Value'}}
console.log(obj)
Display volontà:
Nota: è necessario solo accedere all'oggetto. Ad esempio, questo non funzionerà:
console.log('My object : ' + obj)
Altri suggerimenti
Utilizzare il metodo JSON.stringify nativo.
Funziona con oggetti nidificati e tutti i principali browser 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()
Mozilla API Reference e altri esempi.
obj = JSON.parse(str); // Reverses above operation (Just in case if needed.)
Usa un personalizzato JSON.stringify sostituto se incontrare 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 oggetto JavaScript specificato. Questo elenco consente di utilizzare triangoli di apertura per esaminare il contenuto di oggetti figlio.
Si noti che la funzione console.dir() non è standard. Vedere MDN Web Docs
provare questo:
console.log(JSON.stringify(obj))
Questo stamperà la versione stringa i dell'oggetto. Così, invece di [object] come uscita si otterrà il contenuto dell'oggetto.
Bene, Firefox (grazie a @Bojangles per informazioni dettagliate) ha metodo Object.toSource() che stampa come oggetti JSON e function(){}.
Questo è sufficiente per la maggior parte degli scopi di debug, immagino.
Se si desidera utilizzare avviso, per stampare l'oggetto, si può fare questo:
alert("myObject is " + myObject.toSource());
Si dovrebbe stampare ogni proprietà e il suo valore corrispondente in formato stringa.
In NodeJS è possibile stampare un oggetto utilizzando util.inspect(obj) . Sia sicuro dichiarare la profondità o avrete solo una stampa superficiale dell'oggetto.
Se volete vedere i dati in formato tabulare è possibile utilizzare
console.table(obj);
Tabella può essere ordinata se si fa clic sulla colonna della tabella.
È inoltre possibile selezionare quali colonne da mostrare:
console.table(obj, ['firstName', 'lastName']);
È possibile trovare maggiori informazioni su console.table qui
funzione:
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;
}
Utilizzo:
var myObject = {
name: 'Wilson Page',
contact: {
email: 'wilson@hotmail.com',
tel: '123456789'
}
}
$('body').append( print(myObject) );
Esempio:
Come è stato detto prima di migliore e più semplice modo che ho trovato era
var getPrintObject=function(object)
{
return JSON.stringify(object);
}
Utilizzare questa:
console.log('print object: ' + JSON.stringify(session));
Per stampare l'oggetto in pieno con Node.js con colori come un bonus:
console.dir(object, {depth: null, colors: true})
I colori sono ovviamente opzionali, 'profondità: null'. Stamperà l'oggetto completo
Le opzioni non sembrano essere supportato nei browser.
References:
https://developer.mozilla.org/en- USA / docs / Web / API / Console / dir
https://nodejs.org/api/console.html#console_console_dir_obj_options
Se si desidera stampare l'oggetto della sua lunghezza, è possibile utilizzare
console.log (require ( 'util') ispezionare (obj, {showHidden: false, profondità: null}.)
Se si desidera stampare l'oggetto convertendolo alla stringa poi
console.log (JSON.stringify (obj));
(Questo è stato aggiunto alla mia biblioteca all'indirizzo GitHub )
Reinventare la ruota qui! Nessuna di queste soluzioni ha lavorato per la mia situazione. Così, ho subito manipolata fino risposta di pagewil. Questo non è per la stampa su schermo (tramite console, o campo di testo o qualsiasi altra cosa). E ', tuttavia, per il trasporto dei dati. Questa versione sembra tornare un risultato molto simile a toSource(). Io non ho provato JSON.stringify, ma suppongo questo è circa la stessa cosa. Il risultato di questa funzione è una dichiarazione oggetto Javascript valido.
non avrei dubbi se qualcosa di simile era già sul SO da qualche parte, ma era solo più breve per renderlo più a spendere un po 'alla ricerca delle risposte passate. E dal momento che questa domanda è stata la mia top hit su google quando ho iniziato a cercare su questo; Ho pensato di metterlo qui potrebbe aiutare gli altri.
In ogni caso, il risultato di questa funzione sarà una stringa che rappresenta l'oggetto, anche se l'oggetto è incorporato gli oggetti e gli array, e anche se tali oggetti o array hanno ulteriormente incorporati oggetti e gli array. (Ho sentito ti piace bere? Così, ho pimped la tua auto con un dispositivo di raffreddamento. E poi, ho pimped vostro dispositivo di raffreddamento con un dispositivo di raffreddamento. Così, il vostro dispositivo di raffreddamento può bere, mentre il vostro essere cool.)
Le matrici vengono memorizzati con [] anziché {} e non lo hanno quindi coppie chiave / valore, solo valori. Come gli array regolari. Pertanto, essi vengono creati come gli array fanno.
Inoltre, tutte le stringhe (compresi i nomi principali) sono quotati, questo non è necessario a meno che tali stringhe hanno caratteri speciali (come uno spazio o una barra). Ma, non ho voglia di rilevare questo solo per rimuovere alcune citazioni che altrimenti ancora funzionare bene.
Questa stringa risultante può essere usato con eval o semplicemente scaricarli in una var attraverso manipolazione delle stringhe. Così, ricreando ancora una volta l'oggetto, 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)+"]";
}
Fatemi sapere se ho messo tutto in su, funziona bene nel mio test. Inoltre, l'unico modo ho potuto pensare di rilevare il tipo array è stato quello di verificare la presenza di length. Perché JavaScript memorizza davvero array come oggetti, non posso davvero controllare per il tipo array (non c'è questo tipo!). Se qualcun altro conosce un modo migliore, mi piacerebbe sentire. Perché, se l'oggetto ha anche una proprietà chiamata length, questa funzione viene erroneamente trattarlo come un array.
EDIT: Aggiunto il controllo per gli oggetti nulli valore. Grazie Brock Adams
EDIT: Qui di seguito è la funzione fissata per essere in grado di stampare oggetti infinitamente ricorsivi. Questo non stampa la stessa toSource da FF perché toSource stamperà l'infinito ricorsione una volta, dove, come, questa funzione ucciderà immediatamente. Questa funzione viene eseguito più lentamente rispetto a quello di cui sopra, quindi sto aggiungendo qui invece di modificare la funzione di cui sopra, come il suo necessario solo se avete intenzione di passare oggetti che link a se stessi, da qualche parte.
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)+"]";
}
Prova:
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: Il tentativo di stampare document.body è un esempio terribile. Per uno, FF limita a stampare una stringa oggetto vuoto quando si utilizza toSource. E quando si utilizza la funzione di cui sopra, si blocca su FF SecurityError: The operation is insecure.. E Chrome andrà in crash il Uncaught RangeError: Maximum call stack size exceeded. Chiaramente, document.body non doveva essere convertiti in stringa. Perché la sua troppo grande, o contro la politica di sicurezza per accedere a determinate proprietà. A meno che, Ho sbagliato qualcosa qui, dica!
ho bisogno di un modo per stampare in modo ricorsivo l'oggetto, che pagewil di risposta fornita (Grazie!). Ho aggiornato un po 'per includere un modo per stampare fino a un certo livello, e di aggiungere la spaziatura in modo che sia ben rientrato basata sul livello corrente che siamo 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 = '<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;
};
Utilizzo:
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) );
Usalo semplicemente
JSON.stringify(obj)
Esempio
var args_string = JSON.stringify(obj);
console.log(args_string);
O
alert(args_string);
Nota anche che le funzioni JavaScript sono considerate oggetti.
In realtà puoi assegnare una nuova proprietà come questa
foo.moo = "stackoverflow";
console.log(foo.moo);
NB: In questi esempi, yourObj definisce l'oggetto che si desidera esaminare.
Prima di tutto il mio preferito almeno ancora modo più utilizzato di visualizzare un oggetto:
Questo è il modo di fatto di mostrare il contenuto di un oggetto
console.log(yourObj)
produrrà qualcosa come:
Credo che la soluzione migliore è quella di guardare attraverso gli oggetti chiavi, e poi attraverso gli oggetti valori se si vuole veramente vedere ciò che l'oggetto possiede ...
console.log(Object.keys(yourObj));
console.log(Object.values(yourObj));
il risultato sarà qualcosa di simile a:
(Foto sopra: chiavi / valori memorizzati nell'oggetto)
C'è anche questa nuova opzione se si sta utilizzando ECMAScript 2016 o più recente:
Object.keys(yourObj).forEach(e => console.log(`key=${e} value=${yourObj[e]}`));
Questo produrrà uscita ordinata:
La soluzione menzionato in una risposta precedente: console.log(yourObj) mostra troppi parametri e non è il modo più facile da usare per visualizzare i dati che si desidera . Per questo motivo vi consiglio le chiavi di registrazione e quindi valorizzi l'separatamente.
Next up:
console.table(yourObj)
Qualcuno in un commento precedente ha suggerito questo, però non ha mai funzionato per me. Se funziona per qualcun altro su un browser diverso o qualcosa, allora complimenti! Ill ancora messo il codice qui per riferimento!
Emette qualcosa di simile alla console:
Ecco un modo per farlo:
console.log("%o", obj);
Il modo più semplice:
console.log(obj);
o con un messaggio:
console.log("object is: %O", obj);
Il primo oggetto che si passa 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.
io uso sempre console.log("object will be: ", obj, obj1).
in questo modo non ho bisogno di fare la soluzione con la stringa i con JSON.
Tutte le proprietà dell'oggetto saranno ben espanse.
Un altro modo di visualizzare gli oggetti all'interno della console è con JSON.stringify. Cassa il seguente esempio:
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));
var list = function(object) {
for(var key in object) {
console.log(key);
}
}
dove object è l'oggetto
o è possibile utilizzare questo in strumenti di Chrome dev, "console" tab:
console.log(object);
Si supponga oggetto obj = {0:'John', 1:'Foo', 2:'Bar'}
contenuti dell'oggetto di stampa
for (var i in obj){
console.log(obj[i], i);
}
uscita Console (Chrome DevTools):
John 0
Foo 1
Bar 2
Speranza che aiuta!
JavaScript Funzione
<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>
Stampa oggetto
<script type="text/javascript">
print_r(JAVACRIPT_ARRAY_OR_OBJECT);
</script>
Una funzione di supporto poco che uso sempre nei miei progetti per il semplice, il debug veloce attraverso la console. L'ispirazione tratta 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) + ')');
}
Utilizzo
uscite dd(123.55);:
var obj = {field1: 'xyz', field2: 2016};
dd(obj, 'My Cool Obj');
Io preferisco utilizzare console.table per ottenere formato chiaro oggetto, in modo immaginate di avere questo oggetto:
const obj = {name: 'Alireza', family: 'Dezfoolian', gender: 'male', netWorth: "$0"};
E si vede un tavolo pulito e leggibile come questo qui sotto:
ho usato il metodo di stampa di pagewil, e ha funzionato molto bene.
ecco la mia versione leggermente ampliata con trattini (sciatta) e distinti prop / ob delimitatori:
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 altro modifica del codice pagewils ... la sua non stampare qualcosa di diverso da corde e lascia il numero e campi booleani vuoto e ho fissato l'errore di battitura sul secondo typeof appena dentro la 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 = '<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;
};
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)))};
Si può mostrare oggetto utilizzando la scheda trattino con la leggibilità.
