Converter JSON para objeto em JavaScript

Neste artigo você vai aprender a como converter JSON para objeto em JavaScript, para assim utilizar os dados do JSON de forma mais simples

Conteúdo também disponível em vídeo:

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

JSON é um formato de dado que dá muita dor de cabeça para os programadores, que tal então transformar em objeto?

Acessando então as suas chaves como propriedades, obtendo assim seus valores

Para isso vamos utilizar a classe JSON, que tem alguns métodos para lidar com o tipo de dado

O que vamos utilizar neste exemplo é o parse, que recebe um JSON como argumento e converte o mesmo em objeto

Veja um código de exemplo:

var json = '{ "name":"Matheus", "age":30, "city":"Floripa" }';

var data = JSON.parse(json);

console.log(data.name); // Matheus

No exemplo acima temos uma variável chamada json com o nosso dado em JSON, descrevendo as características de uma pessoa

Formação Recomendada

Formação Claude Code

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

• 116 aulas
• 4 projetos
• 9h 23min

Conhecer formação

Depois convertemos esse JSON para objeto com o método JSON.parse

E por fim acessamos a propriedade name com notação de ponto, que é uma característica de acesso de propriedades em objetos

E então resolvemos nosso problema, nosso JSON está transformado em objeto

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

Conclusão

Neste artigo você aprendeu a converter JSON para objeto, na linguagem JavaScript

Utilizamos a classe JSON, que tem um método chamado parse

Este método recebe um JSON válido como argumento e o transforma para objeto

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

JSON e objeto JavaScript são a mesma coisa?

Não são, e essa confusão é a raiz de boa parte dos erros com JSON.parse

JSON é TEXTO, uma string que só descreve o dado

Objeto é uma estrutura viva na memória, com propriedades que tu acessa e altera na hora

Repara no exemplo abaixo: o JSON está entre aspas simples do começo ao fim, porque ele é uma string inteira

E dentro dele, toda chave vem entre aspas DUPLAS, sem exceção

Se você já mexeu com um arquivo de texto com uma receita escrita dentro, é mais ou menos isso: o papel descreve o bolo, mas ninguém come o papel 🙂

O JSON.parse é o forno, ele pega o texto e te devolve o bolo

E se o JSON for inválido? Tratando o erro:

Aqui mora o problema real de quem cai nesse assunto

Quando o texto não é um JSON válido, o JSON.parse não devolve null nem undefined, ele LANÇA um erro

E erro lançado sem tratamento derruba o resto do script ali mesmo

Veja o que acontece com uma vírgula sobrando:

const json = '{ "name":"Matheus", "age":30, }';

try {
const data = JSON.parse(json);
console.log(data.name);
} catch (erro) {
console.log("JSON inválido:", erro.message);
}

O try tenta converter, e se der ruim o catch segura o tranco e o resto da página continua funcionando

Os campeões de JSON inválido são estes:

vírgula sobrando antes de fechar a chave

chave escrita com aspas simples em vez de aspas duplas

resposta vazia ou texto de erro vindo do servidor em vez do JSON que tu esperava

Tome cuidado com o último: às vezes o JSON está certíssimo e o que chegou foi uma página de erro em HTML 😛

Como converter objeto para JSON em JavaScript?

Agora o caminho inverso, que é a segunda pergunta de quase todo mundo

Pra sair do objeto e voltar pra string JSON, a mesma classe tem o stringify:

const pessoa = { name: "Matheus", age: 30, city: "Floripa" };

const json = JSON.stringify(pessoa);

console.log(json); // {"name":"Matheus","age":30,"city":"Floripa"}

Repara que ele já devolve tudo com aspas duplas, do jeitinho que o formato exige

E tem um detalhe massa: dá pra pedir o JSON identado, o que salva a vida na hora de ler no console

console.log(JSON.stringify(pessoa, null, 2));

O segundo argumento é um filtro (aqui não queremos filtrar nada, então vai null) e o terceiro é o tamanho da identação

Parse pra entrar, stringify pra sair, é esse o par que tu vai usar pro resto da vida

Acessando JSON aninhado e listas:

O exemplo do começo é plano, mas JSON de verdade quase nunca é

Normalmente vem objeto dentro de objeto e lista de objetos, e é aí que a galera trava

const data = JSON.parse(json);

console.log(data.address.city); // Floripa

Depois do parse é objeto normal, então vale tudo que tu já sabe: ponto pra propriedade, colchete com índice pra item de lista

E quando o JSON inteiro é uma lista?

Funciona igual, o parse devolve um array e tu percorre como sempre:

const pessoas = JSON.parse(json);

pessoas.forEach((p) => console.log(p.name));

Um detalhe que pega muita gente: chave com espaço ou traço no nome não aceita notação de ponto

E o JSON que vem de uma API?

Esse é o uso mais comum hoje, e tem uma pegadinha boa aqui

Quando tu busca dados de uma API, o corpo da resposta chega como texto

Mas as ferramentas modernas de requisição já te entregam um método que faz a conversão sozinho

fetch("https://sua-api.com/usuarios")
.then((res) => res.json())
.catch((erro) => console.log("Deu ruim:", erro.message));

Que res.json()?

Ele é o parse já embutido na resposta, ou seja, o data que chega no segundo then JÁ é objeto

Caso este erro apareça pra você, é quase sempre isso: chamar JSON.parse em cima de algo que já foi convertido

O JSON.parse espera texto, e recebendo um objeto ele tenta transformar em texto antes, e o resultado é aquele erro esquisito de token inesperado

Regra simples pra não errar: se tu já tem objeto, não passa pelo parse de novo

var, let ou const pra guardar o resultado?

Os exemplos antigos deste post usam var, e vale a explicação

Hoje ninguém mais precisa dele no dia a dia, o padrão é const e, quando a variável precisa mudar, let

E cai bem no nosso caso, porque o objeto convertido raramente é reatribuído

Aí vem a pergunta clássica: mas se é const, eu não posso mexer no objeto?

Pode sim

const trava a REATRIBUIÇÃO da variável, não o conteúdo do objeto

const data = JSON.parse('{ "name":"Matheus" }');

data.name = "Ana"; // funciona numa boa

// data = {}; // isso sim quebra

Então pode trocar todos os var dos seus códigos por const sem medo, o parse continua igualzinho