Primero, mi forma menos favorita pero más utilizada de mostrar un objeto:

2012

Utiliza el JSON.stringifymétodo nativo . Funciona con objetos anidados y todos los principales navegadores admiten este método.

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

Enlace a Mozilla API Reference y otros ejemplos.

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

Use un reemplazador JSON.stringify personalizado si encuentra este error de Javascript

"Uncaught TypeError: Converting circular structure to JSON"
Sandeep
fuente
327
Para obtener una salida más legible, pruebe JSON.stringify (obj, null, 4). Esto lo escribirá como texto cuidadosamente sangrado
Ben Clayton
2
JSON.stringify solo puede mostrar un pequeño subconjunto de valores de javascript y arrojará una excepción para el resto: console.log no tiene este problema.
Recuerda a Monica el
11
Si eres un novato como yo, no lo olvides console.loges decirconsole.log(JSON.stringify(obj,null, 4));
nilesh
2
"Error de tipo no capturado: convertir estructura circular a JSON" cuando ob = ventana.
Michael
1
Tuve casos en los que no funcionó: se mostró {}para un objeto no vacío. Así que asegúrese de consultar console.log(obj)antes de pensar que su objeto está vacío cuando strigify()regrese {}.
Sindarus

Respuestas:

395
var output = '';
for (var property in object) {
  output += property + ': ' + object[property]+'; ';
}
alert(output);
Flavius ​​Stef
fuente
1
Esto es exactamente lo que quiero. Estoy usando google maps v3 y el directionrenderer devuelve un objeto. Tiene cuatro elementos y el nombre de un objeto cambia constantemente, por lo que debemos encontrarlo. Para eso, este método realmente ayudó. Además de esta manera, podemos obtener todos los nombres de las propiedades y objetos. ¿O hay alguna otra forma de encontrar los nombres de los objetos y propiedades?
Jayapal Chandran
35
+1, no todo JavaScript se ejecuta en navegadores o puede depurarse en ellos.
Bill Yang
3
Probablemente quieras enmascarar la estructura incorporada con hasOwnProperty la mayor parte del tiempo.
John
99
Omg - 0: [; 1: o; 2: b; 3: j; 4: e; 5: c; 6: t; 7:; 8: O; 9: b; 10: j; 11: e; 12: c; 13: t; 14:];
JSideris
1
Un poco tarde para encontrar esto, pero como se solicitó en mi cumpleaños el año pasado (29 de agosto), aquí hay un violín que funciona. jsfiddle.net/MrMarlow/fq53o6o9
MrMarlow
124

console.dir(object):

Muestra una lista interactiva de las propiedades de un objeto JavaScript especificado. Este listado le permite usar triángulos de revelación para examinar el contenido de los objetos secundarios.

Tenga en cuenta que la console.dir()función no es estándar. Ver documentos web de MDN

Pizzaiola Gorgonzola
fuente
1
Sí, esta es una buena solución, sin embargo, solo funciona como se ha descubierto si desea registrar solo el objeto (por ejemplo, console.dir (obj)). En caso de que desee concatenar una picadura a la salida, le dará [objeto Object].
Zoman
Una gran ventaja console.dires que aún puede expandir y leer los valores en su consola después de que la variable haya sido recolectada de basura. Esto se describe en otro artículo de SO aquí
Dawson B
Y una ventaja más console.dires que cuando guarda la consola en un archivo, todas las propiedades están en el archivo como se esperaba. Eso no sucede cuando se usa console.log únicamente.
Kepi
79

prueba esto :

console.log(JSON.stringify(obj))

Esto imprimirá la versión stringify del objeto. Entonces, en lugar de [object]como salida, obtendrá el contenido del objeto.

Abhishek Goel
fuente
77
typeerror: Converting circular structure to JSON?
Kaiden Prince
@KaidenPrince vea esta respuesta para su error: stackoverflow.com/questions/4816099/… Es probable que sea un elemento DOM en su objeto. Si ese es el caso, lo mejor es intentar iniciar sesión en la consola en Chrome o Firefox e inspeccionar allí. De lo contrario, tendría que eliminar todos los elementos circulares antes de llamar a JSON.stringify para que funcione.
Ace Hyzer
La solución es simplemente dividirlo en 2 comandos separados, lo creas o no: console.log ("id:"); console.log (obj);
Collin Chaffin
66

Bueno, Firefox (gracias a @Bojangles por información detallada) tiene un Object.toSource()método que imprime objetos como JSON y function(){}.

Eso es suficiente para la mayoría de los propósitos de depuración, supongo.

alamar
fuente
66
Object.toSource () no parece funcionar para Chrome, ¿se espera esto? ¿O Chrome no se encuentra en "navegadores avanzados"? =)
tstyle
44
Hilo antiguo, lo encontré a través de Google. .toSource()en realidad es solo Firefox . Solo pensé que te lo haría saber.
Bojangles
52

Si desea utilizar la alerta, para imprimir su objeto, puede hacer esto:

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

Debe imprimir cada propiedad y su valor correspondiente en formato de cadena.

Garry
fuente
18
toSource () no funciona en navegadores que no sean gecko (por ejemplo, Chrome, Safari)
Yarin
37

Si desea ver los datos en formato tabular, puede usar

console.table(obj);

La tabla se puede ordenar si hace clic en la columna de la tabla.

También puede seleccionar qué columnas mostrar:

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

Puede encontrar más información sobre console.table aquí

Vlad Bezden
fuente
34

En NodeJS puede imprimir un objeto utilizando util.inspect(obj). Asegúrese de indicar la profundidad o solo tendrá una impresión superficial del objeto.

Lander
fuente
33

Función:

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: '[email protected]',
        tel: '123456789'
    }  
}

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

Ejemplo:

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

wilsonpage
fuente
Método de impresión llame al navegador para imprimir la página en pdf: p
Marwen Trabelsi
@jsh, debe cambiar el if-else y verificar el objeto en lugar de solo la cadena. violín actualizado: jsfiddle.net/6eqMn/594
Michael Walter
1
@wilsonpage Esto falla si agrego un valor entero a la propiedad tel :(
ni3
26

Simplemente use

JSON.stringify(obj)

Ejemplo

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

O

alert(args_string);

Además, tenga en cuenta que las funciones de JavaScript se consideran objetos.

Como nota extra:

En realidad, puede asignar nuevas propiedades como esta y acceder a console.log o mostrarla en alerta

foo.moo = "stackoverflow";
console.log(foo.moo);
alert(foo.moo);
Raza Rafaideen
fuente
1
La pregunta en sí misma dice: "Al igual que cuando 'alertamos' una variable", entonces esa no es realmente una respuesta. Y también su otra opción "JSON.stringify (obj)" ya se mencionó en "27 de noviembre de 2010", solo está abarrotando esta pregunta con duplicados y sin respuestas. Su punto sobre la asignación de nuevas propiedades tampoco tiene sentido en este contexto.
Paul
18

Utilizar este:

console.log('print object: ' + JSON.stringify(session));
Walter Caraza
fuente
18

Como se dijo antes, la mejor y más simple forma en que encontré fue

var getPrintObject=function(object)
{
    return JSON.stringify(object);
}
Yonia
fuente
Esta es la solución más fácil y rápida, sin embargo, no funciona en objetos grandes como navigator.
someguy234
16

NB: en estos ejemplos, yourObj define el objeto que desea examinar.

Primero, mi forma menos favorita pero más utilizada de mostrar un objeto:

Esta es la forma de facto de mostrar el contenido de un objeto

console.log(yourObj)

producirá algo como: ingrese la descripción de la imagen aquí

Creo que la mejor solución es mirar a través de las Teclas de Objetos, y luego a través de los Valores de Objetos si realmente quieres ver qué contiene el objeto ...

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

Producirá algo como: ingrese la descripción de la imagen aquí (foto arriba: las claves / valores almacenados en el objeto)

También existe esta nueva opción si está utilizando ECMAScript 2016 o posterior:

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

Esto producirá una salida ordenada: ingrese la descripción de la imagen aquí la solución mencionada en una respuesta anterior: console.log(yourObj)muestra demasiados parámetros y no es la forma más fácil de usar para mostrar los datos que desea . Es por eso que recomiendo registrar claves y luego valores por separado.

Siguiente:

console.table(yourObj)

Alguien en un comentario anterior sugirió este, sin embargo, nunca funcionó para mí. Si funciona para otra persona en un navegador diferente o algo así, ¡felicitaciones! ¡Todavía pondré el código aquí como referencia! Producirá algo como esto en la consola: ingrese la descripción de la imagen aquí

Max Alexander Hanna
fuente
¿Expandiría el ejemplo para incluir Object y obj?
sello histórico
No estoy seguro de entender el comentario, pero agregué diferentes nombres para los objetos que deberían tener un nombre. El objeto no era lo suficientemente explícito.
Max Alexander Hanna
console.table(yourObj) funcionó para mí en Google Chrome versión 77.0.3865.90 (compilación oficial) (64 bits). ¡Gracias por compartir!
Devner
15

(Esto se ha agregado a mi biblioteca en GitHub )

¡Reinventando la rueda aquí! Ninguna de estas soluciones funcionó para mi situación. Entonces, rápidamente modifiqué la respuesta de wilsonpage . Este no es para imprimir en la pantalla (a través de la consola, o campo de texto o lo que sea). Funciona bien en esas situaciones y funciona tan bien como lo solicitó el OP alert. Muchas respuestas aquí no abordan el uso alertcomo lo solicitó el OP. De todos modos, sin embargo, está formateado para el transporte de datos. Esta versión parece devolver un resultado muy similar al toSource(). No lo he probado JSON.stringify, pero supongo que esto es casi lo mismo. Esta versión es más como un poly-fil para que pueda usarlo en cualquier entorno. El resultado de esta función es una declaración de objeto Javascript válida.

No dudaría si algo así ya estaba en SO en alguna parte, pero fue más corto hacerlo que pasar un tiempo buscando respuestas pasadas. Y dado que esta pregunta fue mi mayor éxito en Google cuando comencé a buscar sobre esto; Pensé que ponerlo aquí podría ayudar a otros.

De todos modos, el resultado de esta función será una representación de cadena de su objeto, incluso si su objeto tiene objetos y matrices incrustados, e incluso si esos objetos o matrices tienen aún más objetos y matrices incrustados. (¿Te escuché que te gusta beber? Así que le piminé a tu auto con un enfriador. Y luego, pimé tu enfriador con un enfriador. Por lo tanto, tu enfriador puede beber, mientras tú eres frío).

Las matrices se almacenan en []lugar de {}y, por lo tanto, no tienen pares clave / valor, solo valores. Al igual que las matrices regulares. Por lo tanto, se crean como lo hacen las matrices.

Además, se citan todas las cadenas (incluidos los nombres de las teclas), esto no es necesario a menos que esas cadenas tengan caracteres especiales (como un espacio o una barra inclinada). Pero, no tenía ganas de detectar esto solo para eliminar algunas citas que de otro modo funcionarían bien.

Esta cadena resultante se puede usar con evalo simplemente volcarla en una manipulación de var a través de cadena. Por lo tanto, volver a crear su objeto nuevamente, a partir del texto.

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

Avíseme si lo arruiné todo, funciona bien en mis pruebas. Además, la única forma en que podía pensar para detectar el tipo arrayera verificar la presencia de length. Debido a que Javascript realmente almacena matrices como objetos, en realidad no puedo verificar el tipo array(¡no existe ese tipo!). Si alguien más conoce una mejor manera, me encantaría escucharla. Porque, si su objeto también tiene una propiedad llamada length, esta función lo tratará erróneamente como una matriz.

EDITAR: Se agregó verificación para objetos con valor nulo. Gracias Brock Adams

EDITAR: A continuación se muestra la función fija para poder imprimir objetos infinitamente recursivos. Esto no imprime lo mismo que toSourcedesde FF porque toSourceimprimirá la recursión infinita una vez, mientras que esta función la matará de inmediato. Esta función se ejecuta más lentamente que la anterior, así que la agrego aquí en lugar de editar la función anterior, ya que solo es necesaria si planea pasar objetos que se vinculan a sí mismos, en algún lugar.

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

Prueba:

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

Resultado:

{'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: Intentar imprimir document.bodyes un ejemplo terrible. Por un lado, FF simplemente imprime una cadena de objeto vacía cuando se usa toSource. Y cuando se usa la función anterior, FF se bloquea SecurityError: The operation is insecure.. Y Chrome se bloqueará Uncaught RangeError: Maximum call stack size exceeded. Claramente, document.bodyno estaba destinado a convertirse en cadena. Porque es demasiado grande o contra la política de seguridad para acceder a ciertas propiedades. A menos que haya estropeado algo aquí, ¡cuéntalo!

Pimp Trizkit
fuente
Propenso a choques. Intenta ObjToSource(document.body), por ejemplo.
Brock Adams
Ok, encontré el problema. No estaba buscando objetos con valores nulos. Eso está arreglado ahora. Pero, aún no puedes hacerlo ObjToSource(document.body)debido a la recursión infinita. Incluso document.body.toSource()en Firefox devuelve un objeto vacío.
Pimp Trizkit
@BrockAdams: ahora está arreglado para una recursión infinita, sin embargo, document.bodytodavía no se puede imprimir. Ver nota.
Pimp Trizkit
document.bodyfue solo un atajo para señalar algunos grandes problemas. Ya has arreglado lo peor de eso y ya he votado. (Aunque, creo que podría manejar un enfoque diferente document.body. La mayoría de las respuestas aquí tampoco funcionarían bien en su contra).
Brock Adams
Bueno, si usted (o cualquier otra persona) tiene alguna idea de cómo superar el hecho de que un objeto tan grande llenará la pila durante la recursión o eludirá las restricciones de seguridad. Me encantaría oírlo. Gracias por el voto!
Pimp Trizkit
14

Si desea imprimir el objeto completo, puede usar

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

Si desea imprimir el objeto convirtiéndolo en la cadena, entonces

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

sreepurna
fuente
necesitaría agregar el JSON.stringifycuando intente concatenar con un objeto de cadena. Si lo usa console.log(object), debería imprimir bastante el contenido del objeto
Satadru Biswas
12

Aquí hay una manera de hacerlo:

console.log("%o", obj);
Anton Harniakou
fuente
Interesante. ¿Hay más información sobre esto?
Lucas
En el contexto de Chrome-dev-tool, Google mencionó esto en este enlace . refiriéndose a la sección "Sustitución de cadenas y formato"
chaco
Lo vi en mdn docs .
Anton Harniakou
2
Respuesta subestimada, esto es exactamente lo que estaba buscando.
Shubham Kushwah
11

Necesitaba una forma de imprimir recursivamente el objeto, que la respuesta de pagewil proporcionó (¡Gracias!). Lo actualicé un poco para incluir una forma de imprimir hasta cierto nivel y agregar espacios para que esté correctamente sangrado en función del nivel actual en el que nos encontramos para que sea más legible.

// 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: '[email protected]',
        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) ); 
megaboss98
fuente
Necesita trabajo. Faltan comas, citas, etc.
posfan12
6

Yo siempre uso console.log("object will be: ", obj, obj1). de esta manera no necesito hacer la solución con stringify con JSON. Todas las propiedades del objeto se expandirán muy bien.

nils petersohn
fuente
6

Otra forma de mostrar objetos dentro de la consola es con JSON.stringify. Mira el siguiente ejemplo:

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));
Kean Amaral
fuente
5

Función 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>

Objeto de impresión

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

a través de print_r en Javascript

Mukesh Chapagain
fuente
No estoy seguro de si esto es un error en el ejemplo js.do que estoy usando, pero esto solo parece generar la primera "rama" completa del árbol. es decir, sigue la primera referencia de la primera referencia ... ad infinitum
Jon Story
5
var list = function(object) {
   for(var key in object) {
     console.log(key);
   }
}

dónde object esta tu objeto

o puede usar esto en las herramientas de desarrollo de Chrome, pestaña "consola":

console.log(object);

usuario3632930
fuente
Creo que tu respuesta es incompleta. (No soy yo quien causa el voto negativo) Esto, sin embargo, solo imprime la clave ..
Abdillah
1
gracias por su respuesta, me ha inspirado a hacer esto: console.log(Object.keys(object));aunque sé que solo imprime las claves de propiedades, es suficiente para mí para mis propósitos;)
Wilson
5

Asumir objeto obj = {0:'John', 1:'Foo', 2:'Bar'}

Imprimir el contenido del objeto

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

Salida de consola (Chrome DevTools):

John 0
Foo 1
Bar 2

¡Espero que ayude!

atlas
fuente
4

Prefiero usar console.tablepara obtener un formato de objeto claro, así que imagina que tienes este objeto:

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

Y verá una tabla ordenada y legible como esta a continuación: mesa de consola

Alireza
fuente
3

Una pequeña función auxiliar que siempre uso en mis proyectos para una depuración simple y rápida a través de la consola. Inspiración tomada de 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); salidas:
ingrese la descripción de la imagen aquí

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

ingrese la descripción de la imagen aquí

George Kagan
fuente
3

También puede usar el concepto literal de plantilla ES6 para mostrar el contenido de un objeto JavaScript en un formato de cadena.

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

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

Ritu
fuente
2

Utilicé el método de impresión de pagewil, y funcionó muy bien.

Aquí está mi versión ligeramente extendida con sangrías (descuidadas) y distintos delimitadores de 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 poco menos
fuente
Es muy descuidado.
posfan12
2

Otra modificación del código de pagewils ... el suyo no imprime nada más que cadenas y deja el número y los campos booleanos en blanco y arreglé el error tipográfico en el segundo tipo de dentro de la función creada por 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;
};
ppetree
fuente
2

Aquí está la función.

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

Puede mostrar objetos usando sangría de tabulación con legibilidad.

Juho Sung
fuente
Tiro seguro para bloquear su navegador: P
Satadru Biswas