Imprimir objeto analisado JSON?

200

Eu tenho um objeto javascript que foi analisado por JSON, JSON.parseagora quero imprimir o objeto para que eu possa depurá-lo (algo está errado com a função). Quando eu faço o seguinte ...

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

Eu recebo vários [objetos] listados. Eu estou querendo saber como imprimir isso para visualizar o conteúdo?

Skizit
fonte
5
como nota de rodapé, pois (property in obj) listará todas as propriedades, mesmo as herdadas. Portanto, você receberá muitas informações estranhas sobre o Object.prototype e qualquer 'classe mãe'. Isso não é conveniente com objetos json. Você precisa filtrá-los com hasOwnProperty () para obter apenas as propriedades que este objeto possui.
BiAiB

Respostas:

124

A maioria dos consoles de depuração oferece suporte à exibição direta de objetos. Apenas use

console.log(obj);

Dependendo do seu depurador, isso provavelmente exibirá o objeto no console como uma árvore recolhida. Você pode abrir a árvore e inspecionar o objeto.

RoToRa
fonte
122
Vale ressaltar que no chrome (e talvez em outros navegadores) quando combinado com uma string como esta: console.log("object: " + obj)ele não exibe o objeto, mas gera "object: [Object obj]".
Shahar
24
O @Shahar console.log("object: %O", obj)(Chrome) ou console.log("object: %o", obj)(Firefox | Safari) fornecerá acesso aos detalhes do objeto, veja minha resposta abaixo.
Dave Anderson
1
@DaveAnderson é uma boa opção para a formatação do objeto no console.
lekant
@ Shahar obrigado, a sua era a informação que eu precisava. Deve ser adicionado à resposta.
Leo Flaherty
3
Além do método de @DaveAnderson, usar uma vírgula para separar seqüências de caracteres de objetos também pode funcionar:console.log("My object: ", obj)
Shahar
571

Você sabe o que JSON significa? Notação de Objeto JavaScript . Faz um formato muito bom para objetos.

JSON.stringify(obj) retornará uma representação em seqüência do objeto.

cHao
fonte
12
Estou surpreso esta resposta está no fundo ...... Esta deve ser a resposta aceita :-)
Mingyu
1
E se você não quiser uma representação de string, mas o objeto como ele apareceria em um editor de código?
SuperUberDuper
5
@SuperUberDuper: ... Então você não estaria tentando criar uma representação de string, agora? :)
Chao
Acredito que o SuperUberDuper estava perguntando se o objeto poderia ser registrado ou exibido sem convertê-lo em uma string. Se estiver visualizando no navegador, o DOM precisa de um elemento, você pode especificar json assim e definir o conteúdo de um elemento innerHTML para essa sequência para visualizá-lo na página.
Jasonleonhard
Por exemplo: importe Json de './data.json'; var el = document.createElement ('div'); el.innerHTML = JSON.stringify (Json);
Jasonleonhard
54

tente em console.dir()vez deconsole.log()

console.dir(obj);

MDN diz que console.dir()é suportado por:

  • FF8 +
  • IE9 +
  • Ópera
  • cromada
  • Safári
Distdev
fonte
1
Disponível apenas no IE9 +
jasonscript
3
console.dir()também está disponível no FF8 +, Opera, Chrome e Safari: developer.mozilla.org/en-US/docs/Web/API/console.dir
olibre
Ótimo! Esta é a melhor solução para mim. Obrigado.
Hoang Le
1
e o nó js?
Xsmael 03/03
bom, mas não suporta concatenação como log ( "string" + variável)
Nassim
47

Se você deseja um JSON bonito, de várias linhas com recuo, pode usar JSON.stringifycom seu terceiro argumento:

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

Por exemplo:

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

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

ou

JSON.stringify(obj, null, 4);

lhe dará o seguinte resultado:

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

Em um navegador console.log(obj), o trabalho é ainda melhor, mas em um console shell (node.js), não.

Lukasz Wiktor
fonte
40

imprimir objeto analisado JSON basta digitar

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

e você obterá uma saída muito clara

BERGUIGA Mohamed Amine
fonte
25

Use formatos de string;

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

O Chrome possui especificadores de formato com o seguinte;

  • %s Formata o valor como uma sequência.
  • %dou %iFormata o valor como um número inteiro.
  • %f Formata o valor como um valor de ponto flutuante.
  • %o Formata o valor como um elemento DOM expansível (como no painel Elementos).
  • %O Formata o valor como um objeto JavaScript expansível.
  • %c Formata a sequência de saída de acordo com os estilos CSS que você fornece.

O Firefox também possui Substituições de String, que têm opções semelhantes.

  • %oProduz um hiperlink para um objeto JavaScript. Clicar no link abre um inspetor.
  • %dou %igera um número inteiro. A formatação ainda não é suportada.
  • %s Produz uma string.
  • %fGera um valor de ponto flutuante. A formatação ainda não é suportada.

O Safari possui formatadores de estilo printf

  • %dou %iInteiro
  • %[0.N]f Valor de ponto flutuante com N dígitos de precisão
  • %o Objeto
  • %s Corda
Dave Anderson
fonte
1
resposta de referência agradável
David
1
% O é realmente útil
everton
4

Agradável e simples:

console.log("object: %O", obj)
mbenhalima
fonte
1
você poderia descrever o que significa% O? deveria ser O especificamente? - sua solução funciona como um encanto
Anthonius
O significa objeto, desde que o objeto possa ser impresso como uma sequência, ele deve ser impresso sem problemas. Isso me ajudou a solucionar problemas em muitos casos em que não tinha certeza de onde está o erro
mbenhalima
Esqueci de informar aqui, na verdade não precisamos usar% O. Podemos usar diretamente o console.log ("object:", obj) obrigado @mbenhalima
Anthonius
3

Apenas use

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

e você receberá isso no console 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
fonte
2

Função simples para alertar o conteúdo de um objeto ou matriz.
Chame essa função com uma matriz ou seqüência de caracteres ou um objeto que alerta o conteúdo.

Função

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
fonte
2

O código a seguir exibirá dados json completos na caixa 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
fonte
2

Se você deseja depurar, por que não usar o console debug

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

Se você está trabalhando em js em um servidor, apenas um pouco mais de ginástica ajuda bastante ... Aqui estão minhas sugestões (pretty-print-on-server):

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

que faz um trabalho estressante ao criar algo que eu possa ler quando escrevo o código do servidor.

O Bárbaro de Software
fonte
0

Não sei como isso nunca foi feito oficialmente, mas adicionei meu próprio jsonmétodo para fazer consoleobjeções para facilitar a impressão de logs com strings:

Observar objetos (não primitivos) em javascript é um pouco como a mecânica quântica .. o que você "mede" pode não ser o estado real, que já foi alterado.

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

Muitas vezes, é necessário exibir uma versão estratificada de um Objeto, porque imprimi-lo como está (Objeto Bruto) imprimirá uma versão "ao vivo" do objeto, que será modificada à medida que o programa progride e não espelhará o estado do objeto. no ponto do tempo registrado, por exemplo:

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
fonte