Como imprimir o conteúdo de um objeto em JavaScript

Neste artigo você vai aprender a imprimir o conteúdo de um objeto em JavaScript, para evitar o problema de receber [object Object]

imprimir o conteúdo de um objeto em JavaScript capa

Fala programador(a), beleza? Bora aprender mais sobre objetos em JavaScript!

As vezes tentando imprimir um objeto você pode ser deparar com a resposta de [object Object], o que infelizmente não quer nos dizer nada

Então qual a forma mais rápida de imprimir o conteúdo de um objeto em JS?

Podemos transformá-lo para um JSON e receber o conteúdo num console.log ou em um alert

Pois o dado será um texto, ou seja, uma string

Veja o código necessário:

const person = {
	name: "Matheus",
	age: 31
}

alert(person) // [object Object]

alert(JSON.stringify(person))

No primeiro caso simulamos o problema que acontece ao tentar imprimir um objeto, recebendo o object Object

E no segundo caso aplicamos a solução que comentei no início do post, resolvendo assim o nosso problema! 🙂

Formação Claude Code
Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

  • 120 aulas
  • 4 projetos
  • 9h 45min

Conclusão

Neste artigo você aprendeu a imprimir o conteúdo de um objeto em JavaScript

Utilizamos o método stringify do objeto JSON, que retorna o objeto em texto

Por isso é possível imprimí-lo em qualquer local

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias! Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias. O link acima contém um cupom de desconto para os cursos!

Antes de sair copiando a solução, bora entender o PORQUÊ, que é o que faz tu nunca mais cair nessa

Quando o JavaScript precisa de um texto e tu entrega um objeto, ele não adivinha o que tu queria ver na tela

É o mesmo motivo de aparecer coisa estranha quando tu junta objeto com string numa mensagem

Ou seja: o problema não é o teu objeto estar vazio ou errado, é ele estar sendo transformado em texto sem ninguém dizer COMO fazer isso

O JSON.stringify entra justamente aí, ele diz pro JavaScript qual texto gerar a partir do objeto 🙂

console.log ou alert: qual usar pra ver um objeto?

Essa dúvida aparece direto, então se liga na diferença

O alert só sabe mostrar texto

Já o console do navegador é feito pra debug

Quando tu joga o objeto direto no console.log, ele te mostra a estrutura pra tu abrir e navegar pelas propriedades, sem virar texto

const person = { name: "Matheus", age: 31 }

console.log(person)

console.log(JSON.stringify(person))

Então a regra prática é essa: pra debugar durante o desenvolvimento, console.log com o objeto direto resolve

Pra mostrar o conteúdo em algum lugar que só aceita texto (alert, um elemento na tela, um log em arquivo), aí sim tu passa pelo JSON.stringify

Bora ver quando essa conversão dá ruim?

E quando o JSON.stringify não resolve?

Tome cuidado, porque nem todo objeto atravessa essa conversão inteiro

O JSON é um formato de texto pra dados, então o que não é dado fica pelo caminho

Funções dentro do objeto, por exemplo, não aparecem no resultado

O mesmo vale pra propriedades sem valor definido

E tem o caso clássico: objeto que aponta pra ele mesmo (a tal referência circular)

Quando isso acontece, a conversão não completa e tu leva um erro na cara em vez do texto

Já me ferrei uma vez tentando imprimir um objeto que carregava referência pro elemento da página, e é sempre isso

Nesses casos, o caminho é inspecionar o objeto direto no console, ou montar na mão um objeto só com as propriedades que tu quer imprimir 🙂

Perguntas frequentes sobre imprimir objeto em JavaScript

É a representação em texto que o JavaScript gera quando um objeto é convertido pra string sem nenhuma instrução de como fazer isso

Não é erro do teu código nem objeto vazio, é só o objeto sendo espremido em texto

Como mostrar o conteúdo de um objeto dentro de uma string?

Dá pra imprimir um objeto que tem outros objetos dentro?

Dá sim, o stringify percorre a estrutura e traz o conteúdo de dentro junto no texto

A ressalva é a mesma da seção anterior: o que não é dado (função, por exemplo) não aparece

Como imprimir uma lista de objetos?

Mesma ideia, tu passa o array pro JSON.stringify e recebe tudo em texto de uma vez

Se for só pra debugar, jogar o array direto no console.log costuma ser mais confortável de ler

Leia também

Escrito por | Matheus Battisti

Matheus Battisti
Fundador da Hora de Codar

Programador apaixonado pelo mundo das tecnologias, sempre buscando em aprender e se aprofundar em linguagens, frameworks e o que mais for necessário para executar um bom trabalho. Agora tem uma nova missão que é de passar seu conhecimento adiante para formar novos programadores e especializar mais os que já são.

Subscribe
Notify of
guest

0 Comentários
Oldest
Newest Most Voted

Formações

Formação Vibe Coding

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

  • 474 aulas
  • 20 projetos
  • 39h 27min

Blog | Mais populares