Converter objeto JavaScript para JSON

Neste artigo você vai aprender a converter objeto JavaScript para JSON, de uma forma muito simples e rápida!

Fala programador(a), beleza? Bora aprender mais sobre objetos, JSON e também sobre a linguagem JavaScript!

Para realizar a conversão de um objeto ao tipo de dado JSON, vamos precisar de uma função da classe JSON

Que realiza a conversão contrária também

O método para transformar objetos em JSON é o stringify

Veja a aplicação prática dele neste código:

const obj = {
	nome: "Matheus",
  idade: 30
}

const json = JSON.stringify(obj);

console.log(json);
console.log(typeof json); //  "string"

Veja que criamos duas constantes, uma com um objeto e outra convertendo o objeto

A função transforma os dados de objeto para um tipo string, porém esta string é um JSON válido

E você pode utilizar como bem entender

Formação Recomendada

Formação Claude Code

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

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

E para converter JSON para objetos?

Para converter um JSON para objeto, você precisa utilizar o método parse

Que aceita como argumento um JSON válido, e nos retorna um objeto JS deste JSON

Exemplo:

const obj = JSON.parse(json);

Quer aprender tudo sobre JSON? Se liga neste vídeo:

Conclusão

Neste artigo você aprendeu a como converter objeto JavaScript para JSON e também a conversão de JSON para objeto

• Para converter um objeto: JSON.stringify
• Para converter um JSON: JSON.parse

Os dois métodos pertencem a classe JSON, que possue métodos para lidar com este tipo de dado!

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!

Qual a diferença entre objeto JavaScript e JSON?

Essa dúvida aparece muito e vale a pausa

O objeto JavaScript é uma estrutura viva dentro do seu código, tu acessa com ponto, muda propriedade, guarda função dentro dele

Já o JSON é só TEXTO, um formato de troca de dados

É como a diferença entre a comida no prato e a receita escrita num papel: a receita descreve, mas você não come o papel 🙂

Por isso o typeof json do exemplo acima devolve "string"

Depois que virou JSON, aquilo ali é texto, e é justamente por isso que ele viaja bem numa requisição, num arquivo ou no localStorage

Nem todo dado sobrevive à conversão:

Tome cuidado com isso, porque pega muita gente desprevenida

O JSON é um formato mais simples que o objeto JavaScript, então ele não tem como representar tudo

Função dentro do objeto não existe no JSON

Propriedade com valor undefined também não tem representação lá

Então elas simplesmente somem do resultado, sem erro nenhum, sem aviso nenhum

const obj = {
nome: "Matheus",
idade: 30,
saudacao: function () {
return "oi"
},
apelido: undefined
}

console.log(JSON.stringify(obj))
// {"nome":"Matheus","idade":30}

Se liga: o objeto tinha quatro propriedades e o JSON saiu com duas

Já me ferrei uma vez achando que o dado tinha se perdido no backend, e na real ele nunca chegou a virar JSON 😀

Como deixar o JSON formatado e legível?

O stringify cospe tudo numa linha só, o que é ótimo pra máquina e péssimo pro teu olho

Mas ele aceita mais argumentos

O terceiro serve pra indentação

const obj = {
nome: "Matheus",
idade: 30
}

console.log(JSON.stringify(obj, null, 2))

O null do meio é onde entraria um filtro de propriedades, e o 2 é a quantidade de espaços da indentação

Saída:

{
"nome": "Matheus",
"idade": 30
}

Muito mais fácil de debugar assim, né? 😀

E se o JSON for inválido?

Aqui mora a pegadinha do parse

Ele não é gentil: se o texto não for um JSON válido, ele quebra a execução na hora

Uma vírgula sobrando, uma aspa simples no lugar da dupla, uma resposta vazia da API, qualquer coisa assim já derruba

Por isso, sempre que o JSON vier de fora (usuário, arquivo, requisição), envolve em try/catch

const texto = '{"nome": "Matheus",}'

try {
const obj = JSON.parse(texto)
console.log(obj)
} catch (e) {
console.log("JSON inválido, tratando o erro aqui")
}

Regra simples que eu sigo: JSON que eu mesmo gerei com stringify eu converto direto, JSON que veio de fora eu sempre protejo

Funciona com array de objetos também?

Funciona, e é o caso mais comum do dia a dia

Lista de produtos, lista de usuários, resposta de API, tudo isso é array de objetos

Os mesmos dois métodos dão conta

const usuarios = [
{ nome: "Matheus", idade: 30 },
{ nome: "Ana", idade: 25 }
]

const json = JSON.stringify(usuarios)

const devolta = JSON.parse(json)

Ou seja, tu não precisa percorrer o array na mão

O stringify desce a estrutura inteira sozinho, inclusive objeto dentro de objeto