Come posso visualizzare il contenuto di un oggetto JavaScript in un formato stringa come quando abbiamo alertuna variabile?

Allo stesso modo formattato che voglio visualizzare un oggetto.

Se si desidera stampare l'oggetto per scopi di debug, utilizzare il codice:

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

visualizzerà:

Nota: è necessario solo registrare l'oggetto. Ad esempio, questo non funzionerà:

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

Nota ' : puoi anche usare una virgola nel logmetodo, quindi la prima riga dell'output sarà la stringa e dopo che l'oggetto sarà reso:

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

Usa il JSON.stringifymetodo nativo . 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.)

Utilizzare un sostituto JSON.stringify personalizzato se si riscontra 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 i triangoli di apertura per esaminare il contenuto degli oggetti figlio.

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

prova questo :

console.log(JSON.stringify(obj))

Questo stamperà la versione stringify dell'oggetto. Quindi invece che [object]come output otterrai il contenuto dell'oggetto.

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

È abbastanza per la maggior parte degli scopi di debug, immagino.

Se si desidera utilizzare l'avviso, per stampare l'oggetto, è possibile effettuare ciò:

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

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

Se desideri visualizzare i dati in formato tabellare, puoi utilizzare

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

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

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

Uso:

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

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

Esempio:

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

Basta usare

JSON.stringify(obj)

Esempio

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

O

alert(args_string);

Inoltre, le note nelle funzioni javascript sono considerate come oggetti.

Come nota extra:

In realtà è possibile assegnare nuove proprietà come questa e accedervi console.log o visualizzarlo in avviso

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

Usa questo:

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

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

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

Per stampare l'intero oggetto con Node.js con i colori come bonus:

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

I colori sono ovviamente opzionali, 'depth: null' stamperà l'intero oggetto.

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

NB: In questi esempi, yourObj definisce l'oggetto che si desidera esaminare.

Prima di tutto il mio modo meno preferito ma più utilizzato per visualizzare un oggetto:

Questo è il modo defacto di mostrare il contenuto di un oggetto

console.log(yourObj)

produrrà qualcosa come:

Penso che la soluzione migliore sia guardare attraverso le chiavi degli oggetti e poi attraverso i valori degli oggetti se vuoi davvero vedere cosa contiene l'oggetto ...

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

Produrrà qualcosa del tipo: (nella foto sopra: le chiavi / i valori memorizzati nell'oggetto)

C'è anche questa nuova opzione se stai usando ECMAScript 2016 o più recente:

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

Questo produrrà un output accurato: la soluzione menzionata in una risposta precedente: console.log(yourObj)visualizza troppi parametri e non è il modo più facile da usare per visualizzare i dati desiderati . Questo è il motivo per cui raccomando di registrare chiavi e quindi valori separatamente.

Prossimo :

console.table(yourObj)

Qualcuno in un precedente commento ha suggerito questo, tuttavia non ha mai funzionato per me. Se funziona per qualcun altro su un browser diverso o qualcosa del genere, quindi complimenti! Metterò ancora il codice qui come riferimento! Produrrà qualcosa di simile alla console:

(Questo è stato aggiunto alla mia biblioteca su GitHub )

Reinventare la ruota qui! Nessuna di queste soluzioni ha funzionato per la mia situazione. Quindi, ho rapidamente risolto la risposta di Wilsonpage . Questo non è per la stampa su schermo (tramite console, campo di testo o altro). Funziona bene in quelle situazioni e funziona bene come richiesto dal PO, per alert. Molte risposte qui non affrontano l'utilizzo alertcome richiesto dall'OP. Comunque, è, tuttavia, formattato per il trasporto di dati. Questa versione sembra restituire un risultato molto simile a toSource(). Non ho testato contro JSON.stringify, ma presumo che sia più o meno la stessa cosa. Questa versione è più simile a un poly-fil in modo da poterla utilizzare in qualsiasi ambiente. Il risultato di questa funzione è una dichiarazione di oggetto Javascript valida.

Non dubiterei che qualcosa del genere fosse già su SO da qualche parte, ma era solo più breve per farlo che passare un po 'di tempo a cercare le risposte passate. E dal momento che 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 forma di stringa del tuo oggetto, anche se il tuo oggetto ha oggetti e matrici incorporati, e anche se tali oggetti o matrici hanno ancora oggetti e matrici incorporati. (Ho sentito che ti piace bere? Quindi, ho sfruttato la tua auto con un dispositivo di raffreddamento. E poi, ho ottimizzato il tuo dispositivo di raffreddamento con un dispositivo di raffreddamento. Quindi, il tuo dispositivo di raffreddamento può bere, mentre sei freddo.)

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

Inoltre, vengono citate tutte le stringhe (inclusi i nomi delle chiavi), ciò non è necessario a meno che quelle stringhe abbiano caratteri speciali (come uno spazio o una barra). Ma non avevo voglia di rilevarlo solo per rimuovere alcune virgolette che altrimenti avrebbero comunque funzionato bene.

Questa stringa risultante può quindi essere utilizzata con evalo semplicemente scaricandola in una manipolazione var-through della stringa. Quindi, ricreare di nuovo 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)+"]";
}

Fammi sapere se ho sbagliato tutto, funziona bene nei miei test. Inoltre, l'unico modo in cui potevo pensare di rilevare il tipo arrayera verificare la presenza di length. Poiché Javascript memorizza realmente le matrici come oggetti, non posso effettivamente verificare il tipo array(non esiste un tipo del genere!). Se qualcun altro conosce un modo migliore, mi piacerebbe ascoltarlo. Perché, se il tuo oggetto ha anche una proprietà denominatalength questa funzione lo tratterà erroneamente come un array.

EDIT: aggiunto controllo per oggetti con valore nullo. Grazie Brock Adams

MODIFICA: Di seguito è riportata la funzione fissa per poter stampare oggetti ricorsivi all'infinito. Questo non stampa lo stesso toSourcedi FF perché toSourcestamperà l'infinita ricorsione una volta, dove, questa funzione la ucciderà immediatamente. Questa funzione è più lenta di quella sopra, quindi la sto aggiungendo qui invece di modificare la funzione sopra, poiché è necessaria solo se si prevede di passare oggetti che si collegano 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)+"]";
}

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 terribile esempio. Per uno, FF stampa solo una stringa di oggetto vuota quando si utilizza toSource. E quando si utilizza la funzione sopra, FF si blocca SecurityError: The operation is insecure.. E Chrome si bloccherà Uncaught RangeError: Maximum call stack size exceeded. Chiaramente, document.bodynon doveva essere convertito in stringa. Perché è troppo grande o contro la politica di sicurezza per accedere a determinate proprietà. A meno che, non abbia fatto un casino qui, dillo!

Se desideri stampare l'oggetto per tutta la sua lunghezza, puoi usare

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

Se si desidera stampare l'oggetto convertendolo quindi nella stringa

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

Ecco un modo per farlo:

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

Avevo bisogno di un modo per stampare ricorsivamente l'oggetto, che la risposta di pagewil forniva (grazie!). L'ho aggiornato un po 'per includere un modo per stampare fino a un certo livello e per aggiungere spaziatura in modo che sia correttamente rientrato 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 = '<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;
};

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

Lo uso sempre console.log("object will be: ", obj, obj1). in questo modo non ho bisogno di fare la soluzione alternativa con stringify con JSON. Tutte le proprietà dell'oggetto verranno espanse piacevolmente.

Un altro modo di visualizzare oggetti all'interno della console è con JSON.stringify. Dai un'occhiata all'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));

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

Oggetto di stampa

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

via print_r in Javascript

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

dov'è il objecttuo oggetto

oppure puoi utilizzarlo negli strumenti di sviluppo di Chrome, scheda "console":

console.log(object);

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

Stampa il contenuto dell'oggetto

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

Uscita console (Chrome DevTools):

John 0
Foo 1
Bar 2

Spero che aiuti!

Preferisco usare console.tableper ottenere il formato dell'oggetto chiaro, quindi immagina di avere questo oggetto:

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

E vedrai una tabella ordinata e leggibile come questa qui sotto:

Una piccola funzione di supporto che utilizzo sempre nei miei progetti per un debug semplice e veloce tramite la console. 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) + ')');
}

uso

dd(123.55); uscite:

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

È inoltre possibile utilizzare il concetto letterale del modello ES6 per visualizzare il contenuto di un oggetto JavaScript in un formato stringa.

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

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

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

ecco la mia versione leggermente estesa con rientri (sciatti) e delimitatori prop / ob distinti:

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 di pagewils ... il suo non stampa altro che stringhe e lascia vuoti il ​​numero e i campi booleani e ho corretto l'errore di battitura sul secondo tipo di appena all'interno della funzione creata 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)))};

Può mostrare l'oggetto usando il rientro di tabulazione con leggibilità.