programacion - ¿Cómo puedo mostrar un objeto de JavaScript?
recorrer array de objetos javascript (30)
prueba esto :
console.log(JSON.stringify(obj))
Esto imprimirá la versión de Stringify del objeto. Entonces, en lugar de [object] como salida, obtendrá el contenido del objeto.
¿Cómo muestro el contenido de un objeto JavaScript en un formato de cadena como cuando alert una variable?
De la misma manera formateada quiero mostrar un objeto.
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.
Aquí hay una manera de hacerlo:
console.log("%o", obj);
Asume el 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!
Bueno, Firefox (gracias a @Bojangles por información detallada) tiene el 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.
Como se dijo antes, la mejor y más sencilla manera que encontré fue
var getPrintObject=function(object)
{
return JSON.stringify(object);
}
Creo que la mejor solución es mirar a través de las Claves del objeto, y luego a través de los Valores del Objeto si realmente quieres ver lo que contiene el objeto ...
console.log(Object.keys(obj));
console.log(Object.values(obj));
También existe esta nueva opción si está utilizando ECMAScript 2016 o más reciente:
Object.keys(obj).forEach(e => console.log(`key=${e} value=${obj[e]}`));
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.
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 se compone del signo de porcentaje (%) seguido de una letra que indica el formato que se debe aplicar.
Necesitaba una forma de imprimir recursivamente el objeto, que proporcionó la respuesta de la página (¡Gracias!). Lo actualicé un poco para incluir una forma de imprimir hasta un 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) );
Otra forma de mostrar objetos dentro de la consola es con JSON.stringify . Echa un vistazo al 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));
Otra modificación del código de pagewils ... no imprime nada más que cadenas y deja en blanco el número y los campos booleanos, y corregí el error tipográfico en el segundo tipo 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;
};
Para imprimir el objeto completo con Node.js con colores como bonificación:
console.dir(object, {depth: null, colors: true})
Por supuesto, los colores son opcionales, "profundidad: nula" 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
Si desea imprimir el objeto de su longitud completa, puede utilizar
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));
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 utilizar
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'']);
Puedes encontrar más información sobre la consola.
Si está buscando algo que pueda devolver una cadena prettificada de cualquier objeto javascript, visite https://github.com/fresheneesz/beautinator . Un ejemplo:
var result = beautinator({ "font-size": "26px","font-family": "''Open Sans'', sans-serif",color: "white", overflow: "hidden",padding: "4px 4px 4px 8px",Text: { display: "block", width: "100%","text-align": "center", "padding-left": "2px","word-break": "break-word"}})
console.log(result)
Resultados en:
{ "font-size": "26px",
"font-family": "''Open Sans'', sans-serif",
color: "white", overflow: "hidden",
padding: "4px 4px 4px 8px",
Text: { display: "block", width: "100%",
"text-align": "center", "padding-left": "2px",
"word-break": "break-word"
}
}
Incluso funciona si hay funciones en tu objeto.
Siempre uso console.log("object will be: ", obj, obj1) . De esta manera no necesito hacer la solución alternativa con la de Strify con JSON. Todas las propiedades del objeto se ampliarán muy bien.
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
var obj = {field1: ''xyz'', field2: 2016};
dd(obj, ''My Cool Obj'');
Usé 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 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;
};
Utilice el método nativo JSON.stringify . Funciona con objetos anidados y todos los principales navegadores support 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 la referencia de la API de Mozilla y otros ejemplos.
obj = JSON.parse(str); // Reverses above operation (Just in case if needed.)
Use un sustituto JSON.stringify personalizado si encuentra este error de Javascript
"Uncaught TypeError: Converting circular structure to JSON"
Utilizar esta:
console.log(''print object: '' + JSON.stringify(session));
probablemente estas buscando este
console.dir ()
console.dir(object) :
Muestra una lista interactiva de las propiedades de un objeto JavaScript especificado. Esta lista le permite utilizar triángulos de divulgación para examinar el contenido de objetos secundarios.
Tenga en cuenta que la función console.dir() no es estándar. Ver MDN Web Docs
(Esto ha sido añadido a mi biblioteca en GitHub )
¡Reinventando la rueda aquí! Ninguna de estas soluciones funcionó para mi situación. Entonces, rápidamente me di cuenta de la respuesta de pagewil. Este no es para imprimir en pantalla (a través de la consola, campo de texto o lo que sea). Es, sin embargo, para el transporte de datos. Esta versión parece devolver un resultado muy similar a toSource() . No he probado JSON.stringify , pero supongo que esto es casi lo mismo. El resultado de esta función es una declaración de objeto Javascript válida.
No dudaría si algo como esto ya estaba en SO en algún lugar, pero era más corto para hacerlo que para pasar un rato buscando respuestas anteriores. Y ya 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 en cadena de su objeto, incluso si su objeto tiene arrays y objetos incrustados, e incluso si esos objetos o arrays tienen incluso más arrays y objetos incrustados. (¿Escuché que te gusta beber? Entonces, rocié tu auto con un enfriador. Y luego, rocié tu enfriador con un enfriador. Así, tu enfriador puede beber, mientras tú te mantienes fresco).
Las matrices se almacenan con [] lugar de {} y, por lo tanto, no tienen pares clave / valor, solo valores. Como matrices regulares. Por lo tanto, se crean como arrays hacen.
Además, todas las cadenas (incluidos los nombres de clave) están citadas, esto no es necesario a menos que esas cadenas tengan caracteres especiales (como un espacio o una barra). Sin embargo, no tenía ganas de detectar esto solo para eliminar algunas citas que de otro modo seguirían funcionando bien.
Esta cadena resultante se puede usar con eval o simplemente volcarla en una manipulación var a través de la cadena. Por lo tanto, volver a crear su objeto de nuevo, desde el 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)+"]";
}
Déjame saber si lo estropeé todo, funciona bien en mis pruebas. Además, la única forma que se me ocurría para detectar un tipo de array era verificar la presencia de length . Debido a que Javascript realmente almacena los arreglos como objetos, no puedo verificar el tipo de array (¡no existe tal tipo!). Si alguien más conoce un camino mejor, me encantaría escucharlo. Porque, si su objeto también tiene una propiedad llamada length , esta función lo tratará por error como una matriz.
EDITAR: Se agregó la comprobación para objetos de 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 toSource from FF porque toSource imprimirá 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 estoy agregando 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: Tratar de imprimir document.body es un ejemplo terrible. Por un lado, FF solo imprime una cadena de objeto vacía cuando usa toSource . Y cuando se usa la función anterior, FF se bloquea en SecurityError: The operation is insecure. . Y Chrome se bloqueará en el Uncaught RangeError: Maximum call stack size exceeded de Uncaught RangeError: Maximum call stack size exceeded . Claramente, document.body no estaba destinado a convertirse en cadena. Debido a que es demasiado grande, o contra la política de seguridad para acceder a ciertas propiedades. A menos que arruine algo aquí, ¡díganlo!
Con firefox
Si desea imprimir el objeto para fines de depuración, sugiero que instale Firebug para Firefox y use el código:
console.log(obj)
Con cromo
var obj = {prop1: ''prop1Value'', prop2: ''prop2Value'', child: {childProp1: ''childProp1Value''}}
console.log(obj)
mostrará
Nota: solo debes registrar el objeto. Por ejemplo, esto no funcionará:
console.log(''My object : '' + obj)
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>
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:
var list = function(object) {
for(var key in object) {
console.log(key);
}
}
donde object es tu objeto
o puede usar esto en las herramientas de desarrollo de Chrome, pestaña "consola":
console.log(object);
var output = '''';
for (var property in object) {
output += property + '': '' + object[property]+''; '';
}
alert(output);