¿Cómo muestro el contenido de un objeto JavaScript en un formato de cadena como cuando alert una variable?

La misma forma formateada en la que quiero mostrar un objeto.

Si desea imprimir el objeto con fines de depuración, use el código:

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

mostrará:

Nota: solo debe registrar el objeto. Por ejemplo, esto no funcionará:

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

Nota ' : También puede usar una coma en el logmétodo, luego la primera línea de la salida será la cadena y luego se representará el objeto:

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

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"

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

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

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.

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.

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.

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í

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.

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: 'wilson@hotmail.com',
        tel: '123456789'
    }  
}

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

Ejemplo:

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

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

Utilizar este:

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

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

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

Para imprimir el objeto completo con Node.js con colores como bonificación:

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

Los colores son, por supuesto, opcionales, 'profundidad: nulo' imprimirá el objeto completo.

Las opciones no parecen ser compatibles con los navegadores.

Referencias

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

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

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:

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

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

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

Aquí hay una manera de hacerlo:

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

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

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.

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

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

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

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!

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:

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:

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

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

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

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

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.