Como posso exibir um objeto JavaScript?

1617

Como exibo o conteúdo de um objeto JavaScript em um formato de string como quando temos alertuma variável?

Da mesma forma que eu quero exibir um objeto.

maxjackie
fonte
7
Você poderia reformular sua pergunta? O que você quer dizer com "formatação"? Como em formatação rica, como negrito / itálico / etc?
Sasha Chedygov 5/06/2009
existe uma maneira de exibir o valor de tempo de execução de uma variável imprimindo o valor da variável usando alguns comandos do console?
precisa saber é o seguinte
1
@BlackPanther Just do console.log("", yourObject1, yourObject2, yourObject3, etc...);. Uma versão mais curta é apenas fazer console.log(yourObject1, yourObject2, etc...);.
tom_mai78101 31/07
2
Você pode selecionar uma resposta melhor que reflita com mais precisão o consenso da comunidade?
HoldOffHunger
Como estaconsole.log('a string', aNumber, anObject)
onmyway133

Respostas:

1068

Se você deseja imprimir o objeto para fins de depuração, use o código:

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

Exibirá:

console de captura de tela chrome

Nota: você deve registrar apenas o objeto. Por exemplo, isso não funcionará:

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

Nota ' : Você também pode usar uma vírgula no logmétodo, a primeira linha da saída será a string e depois o objeto será renderizado:

console.log('My object: ', obj);
Tríptico
fonte
43
Essa função também funciona no Google Chrome ao usar o Console JavaScript (Shift + Control + J ou Shift + Control + I, dependendo da versão do Chrome). Observe também que também console.log(obj1, obj2)funciona muito bem, para que você não precise chamar console.log()todos os objetos ao registrar várias variáveis. Além disso, lembre-se sempre de remover todas as chamadas em produção, pois isso interromperá os navegadores que não a implementam (como o Internet Explorer).
Felix
102
Sim, ele imprime [objeto Objeto], mas tem um pequeno botão de expansão ao lado que permite inspecionar o conteúdo do objeto.
hughes
12
@ hughes ele realmente pode fazer as duas coisas. eu tenho um objeto que eu criei com: var obj = {"foo": false}; e outro objeto que está sendo passado para um retorno de chamada de um servidor, aquele passado pelo retorno de chamada é impresso com a pequena seta para que você possa abri-lo; o criado estaticamente apenas imprime [objeto do objeto] sem seta. Também estou tentando descobrir isso, algum outro pensamento?
benstraw
124
console.log("id:"+obj);não será exibido corretamente, pois gera uma sequência de caracteres como você a vê lá, é necessário especificá-la assim:console.log("id:"); console.log(obj);
Anriëtte Myburgh
14
Tente console.log(JSON.stringify(obj))ouconsole.dir(obj)
Robot Boy
2012

Use o JSON.stringifymétodo nativo . Funciona com objetos aninhados e todos os principais navegadores oferecem suporte a esse 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()

Link para Mozilla API Reference e outros exemplos.

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

Use um substituto JSON.stringify personalizado se você encontrar este erro Javascript

"Uncaught TypeError: Converting circular structure to JSON"
Sandeep
fonte
326
Para uma saída mais legível, tente JSON.stringify (obj, null, 4). Isso vai escrevê-lo texto tão bem recuado
Ben Clayton
2
O JSON.stringify pode mostrar apenas um pequeno subconjunto de valores javascript e lançará uma exceção para o resto - console.log não tem esse problema.
Lembre
11
Se você é um novato como eu, não se esqueça, console.logou seja,console.log(JSON.stringify(obj,null, 4));
nilesh
2
"TypeError não capturado: convertendo estrutura circular para JSON" quando ob = window.
Michael
1
Eu tive casos em que não funcionou: mostrou {}para um objeto não vazio. Portanto, verifique com console.log(obj)antes de pensar que seu objeto está vazio quando strigify()retornar {}.
Sindarus 9/08/16
394
var output = '';
for (var property in object) {
  output += property + ': ' + object[property]+'; ';
}
alert(output);
Flavius ​​Stef
fonte
1
É exatamente isso que eu quero. Estou usando o google maps v3 e o directionrenderer retorna um objeto. Ele tem quatro itens e o nome de um objeto continua mudando, por isso precisamos encontrá-lo. Por isso esse método realmente ajudou. Além disso, podemos obter todos os nomes das propriedades e objetos. Ou existe outra maneira de encontrar os nomes dos objetos e propriedades?
precisa saber é o seguinte
34
+1, nem todo o javascript é executado nos navegadores ou pode ser depurado neles.
Bill Yang
3
Você provavelmente deseja mascarar o cruft incorporado com hasOwnProperty na maioria das vezes.
John
9
Omg - 0: [; 1: o; 2: b; 3: j; 4: e; 5: c; 6: t; 7:; 8: O; 9: b; 10: j; 11: e; 12: c; 13: t; 14:];
JSideris
1
Um pouco tarde para descobrir isso, mas como foi solicitado no meu aniversário no ano passado (29 de agosto), aqui está um violino. jsfiddle.net/MrMarlow/fq53o6o9
MrMarlow
124

console.dir(object):

Exibe uma lista interativa das propriedades de um objeto JavaScript especificado. Essa listagem permite usar triângulos de divulgação para examinar o conteúdo de objetos filho.

Observe que o console.dir()recurso não é padrão. Consulte Documentos da Web da MDN

Pizzaiola Gorgonzola
fonte
1
Sim, esta é uma boa solução, no entanto, só funciona como esperado se você deseja registrar apenas o objeto (por exemplo, console.dir (obj)). Caso você queira concatenar uma picada na saída, ela fornecerá [objeto Objeto].
Zoman
Uma grande vantagem console.dirdisso é que você ainda pode expandir e ler os valores em seu console depois que a variável tiver sido coletada como lixo. Isso está descrito em outro artigo da SO aqui
Dawson B
E mais uma vantagem console.diré que, quando você salva o console em um arquivo, todas as propriedades estão no arquivo conforme o esperado. Isso não acontece ao usar apenas o console.log.
Kepi
79

tente isto:

console.log(JSON.stringify(obj))

Isso imprimirá a versão stringify do objeto. Então, em vez de [object]como uma saída, você obterá o conteúdo do objeto.

Abhishek Goel
fonte
7
typeerror: Converting circular structure to JSON?
Kaiden Prince
@KaidenPrince, veja esta resposta por seu erro: stackoverflow.com/questions/4816099/… É provavelmente um elemento DOM no seu objeto. Se for esse o caso, é melhor tentar fazer logon no console no chrome ou firefox e inspecionar lá. Caso contrário, você terá que remover todos os elementos circulares antes que o JSON.stringify seja chamado para que ele funcione.
Ace Hyzer
A solução é simplesmente dividir em 2 comandos separados, acredite ou não: console.log ("id:"); console.log (obj);
Collin Chaffin
66

Bem, o Firefox (graças a @Bojangles para informações detalhadas) possui um Object.toSource()método que imprime objetos como JSON efunction(){} .

Isso é suficiente para a maioria dos propósitos de depuração, eu acho.

alamar
fonte
6
Object.toSource () parece não funcionar no Chrome, isso é esperado? Ou o Chrome não se enquadra em "navegadores avançados"? =)
tstyle
44
Tópico antigo, acabei de encontrá-lo no Google. .toSource()é realmente apenas o Firefox . Apenas pensei em avisar você.
Bojangles
52

Se você quiser usar o alerta, para imprimir seu objeto, faça o seguinte:

alert("myObject is " + myObject.toSource());

Ele deve imprimir cada propriedade e seu valor correspondente no formato de sequência.

Garry
fonte
18
não toSource () não funcionar em navegadores não-gecko (por exemplo, Chrome, Safari)
Yarin
37

Se você deseja ver dados em formato tabular, pode usar

console.table(obj);

A tabela pode ser classificada se você clicar na coluna da tabela.

Você também pode selecionar quais colunas mostrar:

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

Você pode encontrar mais informações sobre console.table aqui

Vlad Bezden
fonte
34

No NodeJS, você pode imprimir um objeto usando util.inspect(obj). Certifique-se de indicar a profundidade ou você terá apenas uma impressão superficial do objeto.

Lander
fonte
33

Função:

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

Exemplo:

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

wilsonpage
fonte
Método de impressão chame o navegador para imprimir a página em pdf: p
Marwen Trabelsi
@jsh, você deve mudar o if-else e procurar o objeto em vez de apenas a string. violino atualizado: jsfiddle.net/6eqMn/594
Michael Walter
1
@wilsonpage Isso está falhando se eu adicionar um valor inteiro à propriedade tel :(
ni3
26

Basta usar

JSON.stringify(obj)

Exemplo

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

Ou

alert(args_string);

Além disso, observe que as funções javascript são consideradas objetos.

Como uma nota extra:

Na verdade, você pode atribuir uma nova propriedade como essa e acessá-la console.log ou exibi-la em alerta

foo.moo = "stackoverflow";
console.log(foo.moo);
alert(foo.moo);
Raza Rafaideen
fonte
1
A pergunta em si afirma: "Como quando 'alertamos' uma variável", então isso não é realmente uma resposta. E também sua outra opção "JSON.stringify (obj)" já foi mencionada em "27 de novembro de 2010", você está confundindo essa pergunta com duplicatas e sem respostas. Seu ponto de vista sobre a atribuição de novas propriedades também não faz sentido neste contexto.
Paul
18

Usa isto:

console.log('print object: ' + JSON.stringify(session));
Walter Caraza
fonte
18

Como foi dito antes, a melhor e mais simples maneira que encontrei foi

var getPrintObject=function(object)
{
    return JSON.stringify(object);
}
yonia
fonte
Esta é a solução mais fácil e rápida, no entanto, não funciona em objetos grandes como navigator.
someguy234
16

NB: Nestes exemplos, yourObj define o objeto que você deseja examinar.

Primeiro, minha maneira menos preferida e mais utilizada de exibir um objeto:

Esta é a maneira defacto de mostrar o conteúdo de um objeto

console.log(yourObj)

produzirá algo como: insira a descrição da imagem aqui

Acho que a melhor solução é examinar as chaves de objetos e, em seguida, os valores de objetos, se você realmente quiser ver o que o objeto contém ...

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

Ele produzirá algo como: insira a descrição da imagem aqui (foto acima: as chaves / valores armazenados no objeto)

Há também essa nova opção se você estiver usando o ECMAScript 2016 ou mais recente:

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

Isso produzirá uma saída elegante: insira a descrição da imagem aqui A solução mencionada em uma resposta anterior: console.log(yourObj)exibe muitos parâmetros e não é a maneira mais fácil de exibir os dados que você deseja . É por isso que eu recomendo as chaves de log e os valores separadamente.

Próximo :

console.table(yourObj)

Alguém em um comentário anterior sugeriu este, no entanto, nunca funcionou para mim. Se funcionar para outra pessoa em um navegador diferente ou algo assim, parabéns! Ainda vou colocar o código aqui para referência! Produzirá algo assim para o console: insira a descrição da imagem aqui

Max Alexander Hanna
fonte
Você expandiria o exemplo para incluir Object e obj.
historystamp
não sei se entendi o comentário, mas adicionei nomes diferentes para objetos que deveriam ter um nome. O objeto não era explícito o suficiente.
Max Alexander Hanna
console.table(yourObj) funcionou para mim no Google Chrome versão 77.0.3865.90 (versão oficial) (64 bits). Obrigado por compartilhar!
Devner
15

(Isso foi adicionado à minha biblioteca no GitHub )

Reinventando a roda aqui! Nenhuma dessas soluções funcionou para a minha situação. Então, rapidamente identifiquei a resposta de wilsonpage . Este não é para impressão em tela (via console, campo de texto ou o que for). Funciona bem nessas situações e funciona bem como o OP solicitou alert. Muitas respostas aqui não tratam do uso alertconforme o OP solicitado. De qualquer forma, ele é formatado para o transporte de dados. Esta versão parece retornar um resultado muito semelhante ao toSource(). Ainda não testei JSON.stringify, mas presumo que isso seja a mesma coisa. Esta versão é mais como um poly-fil, para que você possa usá-lo em qualquer ambiente. O resultado dessa função é uma declaração de objeto Javascript válida.

Eu não duvido que algo assim já esteja no SO em algum lugar, mas foi mais curto do que gastar um tempo procurando respostas anteriores. E já que essa pergunta foi o meu maior sucesso no google, quando comecei a pesquisar sobre isso; Imaginei que colocá-lo aqui pode ajudar os outros.

De qualquer forma, o resultado dessa função será uma representação de string do seu objeto, mesmo que ele tenha objetos e matrizes incorporados, e mesmo que esses objetos ou matrizes tenham ainda mais objetos e matrizes incorporados. (Ouvi dizer que você gosta de beber? Então, apertei seu carro com um refrigerador. E então, apertei seu refrigerador com um refrigerador. Então, seu refrigerador pode beber enquanto você é legal.)

As matrizes são armazenadas com em []vez de {}e, portanto, não têm pares de chave / valor, apenas valores. Como matrizes regulares. Portanto, eles são criados como matrizes.

Além disso, todas as cadeias (incluindo nomes de chaves) são citadas, isso não é necessário, a menos que essas cadeias tenham caracteres especiais (como um espaço ou uma barra). Mas não tive vontade de detectar isso apenas para remover algumas aspas que, de outra forma, ainda funcionariam bem.

Essa cadeia resultante pode então ser usada com evalou apenas despejando-a em uma manipulação de cadeia variável. Assim, recrie seu objeto novamente, a partir de 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)+"]";
}

Deixe-me saber se eu estraguei tudo, funciona bem nos meus testes. Além disso, a única maneira de pensar em detectar o tipo arrayera verificar a presença de length. Como o Javascript realmente armazena matrizes como objetos, não posso realmente verificar o tipo array(não existe esse tipo!). Se alguém souber de uma maneira melhor, eu adoraria ouvi-la. Porque, se o seu objeto também tiver uma propriedade nomeada length, essa função o tratará por engano como uma matriz.

EDIT: Adicionada verificação para objetos com valor nulo. Obrigado Brock Adams

EDIT: Abaixo está a função fixa para poder imprimir objetos infinitamente recursivos. Isso não imprime da mesma forma que a toSourcepartir de FF, porque toSourceimprime a recursão infinita uma vez, onde, como, essa função a mata imediatamente. Essa função é mais lenta que a acima, então estou adicionando-a aqui em vez de editar a função acima, pois só é necessária se você planeja passar objetos que se vinculam de volta a si mesmos, em algum 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)+"]";
}

Teste:

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: Tentar imprimir document.bodyé um exemplo terrível. Por um lado, o FF apenas imprime uma string de objeto vazia ao usar toSource. E ao usar a função acima, o FF trava SecurityError: The operation is insecure.. E o Chrome falhará Uncaught RangeError: Maximum call stack size exceeded. Claramente, document.bodynão era para ser convertido em string. Porque é muito grande ou é contra a política de segurança acessar determinadas propriedades. A menos que eu estraguei algo aqui em cima, conte!

Pimp Trizkit
fonte
Crash propenso. Tente ObjToSource(document.body), por exemplo.
Brock Adams
ok, encontrei o problema Eu não estava verificando objetos com valor nulo. Isso está consertado agora. Mas você ainda não pode fazer ObjToSource(document.body)por causa da recursão infinita. Mesmo document.body.toSource()no FireFox retorna um objeto vazio.
Pimp Trizkit
@BrockAdams - Agora está fixo para recursão infinita, mas document.bodyainda não é imprimível. Veja a nota.
Pimp Trizkit
document.bodyfoi apenas um atalho para apontar alguns grandes problemas. Você já corrigiu o pior deles e eu já votei. (Embora, eu acredito que uma abordagem diferente poderia lidar document.bodymaioria das respostas aqui não faria bem contra ele quer..)
Brock Adams
Bem, se você (ou qualquer outra pessoa) tiver alguma idéia de como superar o fato de que um objeto tão grande preenche a pilha durante a recursão ou ignora as restrições de segurança. Eu adoraria ouvir isso. Obrigado pelo voto!
Pimp Trizkit
14

Se você deseja imprimir o objeto em todo o seu comprimento, pode usar

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

Se você deseja imprimir o objeto convertendo-o para a string, então

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

sreepurna
fonte
você precisaria adicionar JSON.stringifyquando tentar concatenar com um objeto string. Se você usar console.log(object), deve muito imprimir o conteúdo do objeto
Satadru Biswas
12

Aqui está uma maneira de fazer isso:

console.log("%o", obj);
Anton Harniakou
fonte
Interessante. Existe mais alguma informação sobre isso?
Luke
No contexto do Chrome-dev-tool, o Google mencionou isso neste link . referindo-se à secção "substituição de Cordas e formatação"
chaco
Eu vi isso no mdn docs .
Anton Harniakou
2
Resposta tão subestimada, é exatamente isso que eu estava procurando.
Shubham Kushwah
11

Eu precisava de uma maneira de imprimir recursivamente o objeto, fornecido pela resposta do pagewil (Obrigado!). Atualizei-o um pouco para incluir uma maneira de imprimir até um determinado nível e adicionar espaçamento para que seja recuado adequadamente com base no nível atual em que estamos, para que fique mais legível.

// 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) ); 
megaboss98
fonte
Precisa de trabalho. Faltam vírgulas, aspas, etc.
posfan12
6

Eu sempre uso console.log("object will be: ", obj, obj1). Dessa forma, não preciso fazer a solução alternativa com stringify com JSON. Todas as propriedades do objeto serão bem expandidas.

nils petersohn
fonte
6

Outra maneira de exibir objetos no console é com JSON.stringify. Confira o exemplo abaixo:

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));
Kean Amaral
fonte
5

Função 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 impressão

<script type="text/javascript">
print_r(JAVACRIPT_ARRAY_OR_OBJECT);
</script> 

via print_r em Javascript

Mukesh Chapagain
fonte
Não tenho certeza se isso é um bug no exemplo js.do que estou usando, mas isso parece produzir apenas o primeiro "ramo" completo da árvore. ou seja, segue a primeira referência da primeira referência ... ad infinitum
Jon Story
5
var list = function(object) {
   for(var key in object) {
     console.log(key);
   }
}

onde objectestá seu objeto

ou você pode usar isso nas ferramentas de desenvolvimento do chrome, na guia "console":

console.log(object);

user3632930
fonte
Eu acho que sua resposta está incompleta. (não me essa causa downvote) Este, ainda, imprimir apenas a chave ..
Abdillah
1
Obrigado pela sua resposta, ele me inspirou a fazer isso: console.log(Object.keys(object));enquanto eu sei que só imprime as chaves de propriedades, é o suficiente para me para os meus propósitos;)
Wilson
5

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

Imprimir o conteúdo do objeto

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

Saída do console (Chrome DevTools):

John 0
Foo 1
Bar 2

Espero que ajude!

Atlas
fonte
4

Eu prefiro usar console.tablepara obter um formato de objeto claro, então imagine que você tenha esse objeto:

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

E você verá uma tabela limpa e legível como esta abaixo: console.table

Alireza
fonte
3

Uma pequena função auxiliar que eu sempre uso nos meus projetos para depuração simples e rápida através do console. Inspiração tirada do 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); saídas:
insira a descrição da imagem aqui

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

insira a descrição da imagem aqui

George Kagan
fonte
3

Você também pode usar o conceito literal de modelo ES6 para exibir o conteúdo de um objeto JavaScript em um formato de sequência.

alert(`${JSON.stringify(obj)}`);

const obj  = {
  "name" : "John Doe",
  "habbits": "Nothing",
};
alert(`${JSON.stringify(obj)}`);

Ritu
fonte
2

usei o método de impressão do pagewil e funcionou muito bem.

aqui está minha versão ligeiramente estendida com recuos (desleixados) e delimitadores prop / ob distintos:

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;
};
um pouco menos
fonte
É muito desleixado.
posfan12 21/02
2

Outra modificação do código de pagewils ... dele não imprime nada além de strings e deixa em branco o número e os campos booleanos e eu corrigi o erro de digitação no segundo tipo de apenas dentro da função criada pelo 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;
};
ppetree
fonte
2

Aqui está a função.

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

Ele pode mostrar o objeto usando o recuo da guia com legibilidade.

Juho Sung
fonte
Certo tiro para travar seu navegador: P
Satadru Biswas 1/17/17