Imprimir objeto analizado JSON?

200

Tengo un objeto javascript que se ha analizado utilizando JSON JSON.parse. Ahora quiero imprimir el objeto para poder depurarlo (algo funciona mal con la función). Cuando hago lo siguiente ...

for (property in obj) {
    output += property + ': ' + obj[property]+'; ';
}
console.log(output);

Obtengo varios [Object Object] en la lista. Me pregunto cómo imprimiría esto para ver el contenido.

Skizit
fuente
55
Como nota al margen, for (propiedad en obj) enumerará todas las propiedades, incluso las heredadas. Por lo tanto, obtendrá una gran cantidad de objetos extraños para Object.prototype y cualquier 'clase madre'. Esto no es conveniente con los objetos json. Debe filtrarlos con hasOwnProperty () para obtener solo las propiedades que posee este objeto.
BiAiB

Respuestas:

124

La mayoría de las consolas de depuración admiten la visualización directa de objetos. Solo usa

console.log(obj);

Dependiendo de su depurador, lo más probable es que muestre el objeto en la consola como un árbol colapsado. Puede abrir el árbol e inspeccionar el objeto.

RoToRa
fuente
122
Vale la pena mencionar que en Chrome (y quizás en otros navegadores) cuando se combina con una cadena como esta: console.log("object: " + obj)no muestra el objeto, sino que generará "object: [Object obj]".
Shahar
24
@Shahar console.log("object: %O", obj)(Chrome) o console.log("object: %o", obj)(Firefox | Safari) le dará acceso a los detalles del objeto, vea mi respuesta a continuación.
Dave Anderson
1
@DaveAnderson buen tiro para el formato de objeto en la consola.
lekant
@ Shahar gracias, la tuya fue la información que necesitaba. Debe agregarse a la respuesta.
Leo Flaherty
3
Además del método de @DaveAnderson, el uso de una coma para separar las cadenas de los objetos también puede funcionar:console.log("My object: ", obj)
Shahar
571

¿Sabes qué significa JSON? Notación de objetos JavaScript . Tiene un formato bastante bueno para los objetos.

JSON.stringify(obj) le devolverá una representación de cadena del objeto.

cHao
fuente
12
Me sorprende que esta respuesta esté en la parte inferior ... Esta debería ser la respuesta aceptada :-)
Mingyu
1
¿Qué sucede si no desea una representación de cadena, sino el objeto como aparecería en un editor de código?
SuperUberDuper
55
@SuperUberDuper: ... Entonces no tratarías de construir una representación de cadena, ahora, ¿verdad? :)
cHao
Creo que SuperUberDuper preguntaba si el objeto se podía registrar o ver sin convertirlo en una cadena. Si para ver en el navegador, el DOM necesita un elemento, puede stringify json so y establecer un contenido de elementos innerHTML en esa cadena para verlo en la página.
jasonleonhard
Por ejemplo: importe Json desde './data.json'; var el = document.createElement ('div'); el.innerHTML = JSON.stringify (Json);
jasonleonhard
54

intente en console.dir()lugar deconsole.log()

console.dir(obj);

MDN dice que console.dir()es compatible con:

  • FF8 +
  • IE9 +
  • Ópera
  • Cromo
  • Safari
Distdev
fuente
1
Solo disponible en IE9 +
jasonscript
3
console.dir()también está disponible en FF8 +, Opera, Chrome y Safari: developer.mozilla.org/en-US/docs/Web/API/console.dir
olibre
¡Excelente! Esta es la mejor solución para mí. Gracias.
Hoang Le
1
¿Qué pasa con el nodo js?
Xsmael
bueno, pero no admite la concatenación de cadenas como log ("cadena" + variable)
Nassim
47

Si desea un JSON bonito y de varias líneas con sangría, puede usarlo JSON.stringifycon su tercer argumento:

JSON.stringify(value[, replacer[, space]])

Por ejemplo:

var obj = {a:1,b:2,c:{d:3, e:4}};

JSON.stringify(obj, null, "    ");

o

JSON.stringify(obj, null, 4);

le dará el siguiente resultado:

"{
    "a": 1,
    "b": 2,
    "c": {
        "d": 3,
        "e": 4
    }
}"

En un navegador console.log(obj)funciona aún mejor, pero en una consola de shell (node.js) no lo hace.

Lukasz Wiktor
fuente
40

para imprimir el objeto analizado JSON simplemente escriba

console.log( JSON.stringify(data, null, " ") );

y obtendrá una salida muy clara

BERGUIGA Mohamed Amine
fuente
25

Usar formatos de cadena;

console.log("%s %O", "My Object", obj);

Chrome tiene especificadores de formato con lo siguiente;

  • %s Formatea el valor como una cadena.
  • %do %iFormatea el valor como un entero.
  • %f Formatea el valor como un valor de coma flotante.
  • %o Formatea el valor como un elemento DOM expandible (como en el panel Elementos).
  • %O Formatea el valor como un objeto JavaScript expandible.
  • %c Formatea la cadena de salida de acuerdo con los estilos CSS que proporcione.

Firefox también tiene Substitions de cadena que tienen opciones similares.

  • %oEmite un hipervínculo a un objeto JavaScript. Al hacer clic en el enlace, se abre un inspector.
  • %do %iEmite un entero. El formato aún no es compatible.
  • %s Emite una cadena.
  • %fEmite un valor de punto flotante. El formato aún no es compatible.

Safari tiene formateadores de estilo printf

  • %do %ientero
  • %[0.N]f Valor de coma flotante con N dígitos de precisión
  • %o Objeto
  • %s Cuerda
Dave Anderson
fuente
1
buena respuesta de referencia
David
1
% O es realmente útil
everton
4

Agradable y simple:

console.log("object: %O", obj)
mbenhalima
fuente
1
¿podría describir para qué sirve% O? ¿debería ser O específicamente? - su solución funciona a las
mil maravillas
O significa objeto, por lo que siempre que el objeto pueda imprimirse como una cadena, debe imprimirse sin problemas. Esto me ha ayudado a solucionar problemas en muchos casos en los que no estaba seguro de dónde está el error
mbenhalima
Olvidé informar aquí, en realidad no necesitamos usar% O. Podemos usar directamente console.log ("objeto:", obj) gracias @mbenhalima
Anthonius
3

Solo usa

console.info("CONSOLE LOG : ")
console.log(response);
console.info("CONSOLE DIR : ")
console.dir(response);

y obtendrás esto en la consola de Chrome:

CONSOLE LOG : 
facebookSDK_JS.html:56 Object {name: "Diego Matos", id: "10155988777540434"}
facebookSDK_JS.html:57 CONSOLE DIR : 
facebookSDK_JS.html:58 Objectid: "10155988777540434"name: "Diego Matos"__proto__: Object
diego matos - keke
fuente
2

Función simple para alertar el contenido de un objeto o una matriz.
Llame a esta función con una matriz o cadena o un objeto que alerta los contenidos.

Función

function print_r(printthis, returnoutput) {
    var output = '';

    if($.isArray(printthis) || typeof(printthis) == 'object') {
        for(var i in printthis) {
            output += i + ' : ' + print_r(printthis[i], true) + '\n';
        }
    }else {
        output += printthis;
    }
    if(returnoutput && returnoutput == true) {
        return output;
    }else {
        alert(output);
    }
}

Uso

var data = [1, 2, 3, 4];
print_r(data);
Rayiez
fuente
2

El siguiente código mostrará datos completos de json en el cuadro de alerta

var data= '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';

json = JSON.parse(data);
window.alert(JSON.stringify(json));
Kiran Kumar Kotari
fuente
2

Si desea depurar, ¿por qué no utilizar la depuración de la consola?

window.console.debug(jsonObject);
Ruwantha
fuente
0

Si está trabajando en js en un servidor, solo un poco más de gimnasia es muy útil ... Aquí está mi ppos (pretty-print-on-server):

ppos = (object, space = 2) => JSON.stringify(object, null, space).split('\n').forEach(s => console.log(s));

que hace un gran trabajo al crear algo que realmente puedo leer cuando escribo el código del servidor.

El software bárbaro
fuente
0

No sé cómo nunca se hizo oficialmente, pero agregué mi propio jsonmétodo para consoleobjetar para imprimir registros en cadena:

Observar objetos (no primitivos) en javascript es un poco como la mecánica cuántica ... lo que "mides" podría no ser el estado real, que ya ha cambiado.

console.json = console.json || function(argument){
    for(var arg=0; arg < arguments.length; ++arg)
        console.log(  JSON.stringify(arguments[arg], null, 4)  )
}

// use example
console.json(   [1,'a', null, {a:1}], {a:[1,2]}    )

Muchas veces es necesario ver una versión en cadena de un Objeto porque imprimirlo como está (Objeto sin procesar) imprimirá una versión "en vivo" del objeto que se mutará a medida que el programa progresa, y no reflejará el estado del objeto en el punto de tiempo registrado, por ejemplo:

var foo = {a:1, b:[1,2,3]}

// lets peek under the hood
console.log(foo) 

// program keeps doing things which affect the observed object
foo.a = 2
foo.b = null
vsync
fuente