¿Cómo puedo mostrar un objeto JavaScript?

Question

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

De la misma forma formateada quiero mostrar un objeto.

Answer 1

Si desea imprimir el objeto para fines de depuración, utilice el código:

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

pantalla mostrará:

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

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

Answer 2

Utilice el método JSON.stringify nativa. Funciona con objetos anidados y todos los principales navegadores 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()

Mozilla API de referencia y otros ejemplos.

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

---

Utilice una costumbre JSON.stringify sustituto si Este error Javascript

"Uncaught TypeError: Converting circular structure to JSON"

Answer 3

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

Answer 4

console.dir(object):

  

Muestra una lista interactiva de las propiedades de un objeto JavaScript especificado. Esta lista le permite utilizar triángulos desplegables para examinar el contenido de los objetos secundarios.

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

Answer 5

intente lo siguiente:

console.log(JSON.stringify(obj))

Esto imprimirá la versión stringify del objeto. Así que en lugar de [object] como una salida obtendrá el contenido del objeto.

Answer 6

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

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

Answer 7

Si desea utilizar 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.

Answer 8

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

Answer 9

Si desea ver los datos en forma de tabla que puede utilizar

console.table(obj);

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

También puede seleccionar qué columnas para mostrar:

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

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

Answer 10

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/

Answer 11

Como se dijo antes mejor y más simple manera que encontré fue

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

Answer 12

Utilice esta:

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

Answer 13

Para imprimir el objeto completo con Node.js con colores como un bono:

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

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

No parece que estas opciones tienen que ser apoyado en los navegadores.

Referencias:

https://developer.mozilla.org/en- Estados Unidos / docs / web / API / Consola / dir

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

Answer 14

Si desea imprimir el objeto de toda su longitud, puede utilizar

  

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

Si desea imprimir el objeto mediante su conversión a la cadena a continuación

  

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

Answer 15

(Esto ha sido añadido a mi biblioteca GitHub )

Reinventar la rueda aquí! Ninguna de estas soluciones trabajó para mi situación. Así, rápidamente retocada por la respuesta de pagewil. Éste no es para imprimir en pantalla (a través de la consola, o campo de texto o lo que sea). Es, es, sin embargo, para el transporte de datos. Esta versión parece devolver un resultado muy similar a toSource(). No he intentado JSON.stringify, pero supongo que se trata de la misma cosa. El resultado de esta función es una declaración de objeto Javascript válido.

No me cabe duda de que si algo como esto ya estaba en algún lugar SO, pero era más corto para que sea de pasar un tiempo buscando respuestas anteriores. Y puesto que esta cuestión era mi top hit en Google cuando empecé a buscar sobre esto; Supuse ponerlo aquí podría ayudar a los demás.

En cualquier caso, el resultado de esta función será una representación de cadena del objeto, incluso si su objeto se ha incrustado objetos y matrices, e incluso si esos objetos o matrices incluso han incorporado otros objetos y matrices. (He oído que te gusta beber? Por lo tanto, pimped su coche con un refrigerador. Y entonces, pimped su refrigerador con un enfriador. Por lo tanto, su refrigerador puede beber, mientras que su ser cool.)

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

Además, toda la cadena (incluyendo los nombres de teclas) se cita, esto no es necesario a menos que esas cadenas tienen caracteres especiales (como un espacio o una barra). Sin embargo, no me siento como detectar esto sólo para eliminar algunas citas que de otro modo todavía funciona bien.

Esta cadena resultante puede ser utilizado con eval o simplemente deshacerse de ellos en una var a través de la manipulación de cadenas. Por lo tanto, volver a crear el objeto nuevo, 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)+"]";
}

Quiero saber si metí la pata todo esto, trabaja muy bien en mis pruebas. Además, la única manera de que pudiera pensar para detectar el tipo de array era comprobar la presencia de length. Debido Javascript realmente almacena matrices como objetos, no puedo comprobar realmente para el tipo array (no hay tal tipo!). Si alguien más sabe una mejor manera, me gustaría escucharlo. Porque, si su objeto también tiene una propiedad denominada length, esta función también por error tratarlo como una matriz.

EDIT: Añadido comprobar objetos nulos valorado. Gracias Brock Adams

EDIT: A continuación se muestra la función fija para ser capaz de imprimir objetos infinitamente recursiva. Esto no se imprime el mismo que toSource de FF porque toSource imprimirá el infinito recursividad una vez, en tanto que, esta función lo matará inmediatamente. Esta función se ejecuta más lento que el de arriba, así que estoy añadiendo aquí en vez de modificar la función anterior, ya que su único necesario si va a pasar objetos que enlazan nuevo 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());

Resultados:

{'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: El intentar imprimir document.body es un ejemplo terrible. Por un lado, FF sólo imprime una cadena objeto vacío cuando se utiliza toSource. Y cuando se utiliza la función anterior, FF se estrella en SecurityError: The operation is insecure.. Y Chrome se bloqueará en Uncaught RangeError: Maximum call stack size exceeded. Claramente, document.body no estaba destinado a ser convertido en cadena. Debido a su ya sea demasiado grande, o en contra de la política de seguridad para acceder a ciertas propiedades. A menos que, metí la pata algo aquí, no decir!

Answer 16

que necesitaba una manera de imprimir de forma recursiva el objeto, que de pagewil respuesta proporcionada (Gracias!). He actualizado un poco para incluir una manera de imprimir hasta un cierto nivel, y añadir el espaciado adecuadamente de modo que se sangra basa en el nivel actual que estamos en modo que sea más fácil de leer.

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

Answer 17

Simplemente use

JSON.stringify(obj)

Ejemplo

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

O

alert(args_string);

También tenga en cuenta que en JavaScript las funciones se consideran objetos.

En realidad puedes asignar una nueva propiedad como esta.

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

Answer 18

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

En primer lugar mi menos favorito forma más utilizada de mostrar un objeto:

Este es el camino de facto de que muestra el contenido de un objeto

console.log(yourObj)

producirá algo como:

Creo que la mejor solución es buscar a través de los objetos teclas y, a continuación, a través de los Valores Objetos si realmente quieres ver lo que depara el objeto ...

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

sería algo así como: (Foto arriba: las teclas / valores almacenados en el objeto)

También existe esta nueva opción si usted está utilizando ECMAScript 2016 o más nuevos:

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

Esto producirá salida ordenada: La solución se menciona 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 claves de registro y los valores por separado.

A continuación:

console.table(yourObj)

Alguien en un comentario anterior sugiere éste, sin embargo, nunca trabajó para mí. Si funciona para otra persona en un navegador o algo diferente, entonces felicitaciones! Enfermo todavía poner el código aquí por referencia! Seria algo como esto en la consola:

Answer 19

Aquí hay una manera de hacerlo:

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

Answer 20

La forma más sencilla:

console.log(obj);

O con un mensaje:

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

El primer objeto que pase puede contener uno o más especificadores de formato. Un especificador de formato está compuesto por el signo de porcentaje (%) seguido de una letra que indica el formato de aplicar.

Más especificadores de formato

Answer 21

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

Answer 22

Otra forma de mostrar los objetos dentro de la consola es con JSON.stringify. Pago y envío 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));

Answer 23

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

donde object es el objeto

o puede utilizar esto en herramientas de Chrome dev, ficha "consola":

console.log(object);

Answer 24

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

Contenido de impresión del objeto

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

salida de la consola (Chrome DevTools):

John 0
Foo 1
Bar 2

Espero que ayude!

Answer 25

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> 

print_r en Javascript

Answer 26

Un poco de función auxiliar siempre que utilizo en mis proyectos de depuración sencilla, rápida a través de la consola.  La 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

salidas dd(123.55);: Read

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

Answer 27

Yo prefiero usar console.table para obtener formato claro objeto, por lo que imagine que tiene este objeto:

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

Y usted va a ver una tabla ordenada y legible como esta a continuación:

Answer 28

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

aquí está mi versión ligeramente ampliada con guiones (descuidado) y distintas prop / ob delimitadores:

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

Answer 29

Otra modificación del código pagewils ... su no imprima otra cosa que no sea cuerdas y deja el número y campos booleanos en blanco y fija el error tipográfico en el segundo typeof justo dentro de la función que crea 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;
};

Answer 30

Aquí está 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 mediante tabulación de sangría con una legibilidad.