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.

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á:

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

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"

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

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

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.

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.

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.

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

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.

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/

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

Usa isto:

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

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

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

Para imprimir o objeto completo com o Node.js com cores como bônus:

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

As cores são obviamente opcionais, 'depth: null' imprimirá o objeto completo.

As opções não parecem ser suportadas nos navegadores.

Referências:

https://developer.mozilla.org/en-US/docs/Web/API/Console/dir

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

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:

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: (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: 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:

(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!

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

Aqui está uma maneira de fazer isso:

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

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

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.

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

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

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

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!

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:

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:

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

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

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

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

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.