Transformar JSON em variável em JavaScript

Neste artigo você vai aprender a transformar JSON em variável na linguagem JavaScript, para que possa utilizar os dados no seu programa

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

Fala programador(a), beleza? Bora aprender mais sobre JSON e variáveis em JavaScript!

O dado JSON (JavaScript Object Notation) é uma string, que tem uma estrutura muito semelhante a objetos em JavaScript

Porém com um formato mais rígido, que regras precisam ser seguidas para o mesmo não falhar ou lançar algum erro no software

A semelhança com um objeto também trás uma vantagem, caso atribuirmos um JSON a uma variável ele se transforma em um objeto

Veja um exemplo:

var obj = {
  "nome": "Matheus",
  "idade": 29
}

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Desta forma agora podemos acessar as propriedades do JSON que virou objeto

Caso o JSON esteja em string, o que também muito comum, como a resposta de uma API, por exemplo

Podemos utilizar o método parse do objeto JSON, transformando assim dos dados para objeto

Veja um exemplo:

var json = '{ "nome": "Matheus", "idade": 29 }';

var obj = JSON.parse(json);

console.log(obj);

Desta forma convertemos uma string JSON em um objeto JavaScript válido

E novamente podemos acessar as propriedades que estão no objeto

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

Conclusão

Neste artigo aprendemos a como transformar JSON em variável na linguagem JavaScript

Podemos rapidamente atribuir um JSON a uma variável, que o mesmo se transformará em um objeto válido de JS

Ou se o mesmo for do tipo string, podemos utilizar a função JSON.parse, que o JSON será convertido

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

Como acessar as propriedades depois da conversão:

Falar que dá pra acessar é fácil, bora ver na prática?

console.log(obj.nome)

console.log(obj.idade)

Cada chave do JSON virou uma propriedade do objeto, então o acesso é o mesmo de qualquer objeto de JS que você já usa no dia a dia

Também dá pra acessar por colchetes, que é o jeito que salva quando o nome da chave está guardado em outra variável:

legal né? 😀

Como saber se o seu JSON já é objeto ou ainda é string?

Essa é a dúvida que trava a maioria, e a diferença mora nas aspas

Se o dado está escrito entre aspas, ele ainda é texto, e nenhuma propriedade vai responder

Se ele está solto entre chaves, atribuído direto na variável, o JavaScript já leu como objeto

Na dúvida, pergunta pro próprio JavaScript:

console.log(typeof obj)

Voltou object? pode acessar as propriedades numa boa

Voltou string? falta converter, e é aí que entra o parse que vem logo abaixo

Tome cuidado com o JSON quebrado:

Lembra que lá em cima eu falei que o formato do JSON é mais rígido? pois é, é aqui que isso cobra a conta

Se a string chegar fora do padrão, a conversão não devolve o resultado pela metade, ela para tudo e lança erro

Chave sem aspas duplas, aspas simples no lugar das duplas, vírgula sobrando no fim: qualquer um desses derruba a conversão

Por isso, quando o dado vem de fora e você não controla o que chega, vale proteger a conversão:

try { var obj = JSON.parse(json); console.log(obj); } catch (erro) { console.log("JSON inválido"); }

Assim o teu programa segue de pé mesmo quando o dado vem torto, em vez de morrer na primeira string estranha

Perguntas frequentes sobre JSON e variável em JavaScript:

Qual a diferença entre JSON e objeto JavaScript?

O JSON é um formato de texto, com regras de escrita mais rígidas

O objeto é a estrutura viva dentro do JS, com propriedades que você acessa por ponto

Quando o JSON está escrito direto na variável, o JavaScript já lê como objeto; quando ele chega como texto, precisa ser convertido antes de usar

Preciso sempre usar o parse?

Não!

Se o dado já foi atribuído à variável como objeto, o parse é desnecessário e ainda atrapalha, porque ele espera receber texto

O parse entra quando o conteúdo é uma string, o caso mais comum quando o dado vem de fora do teu código

Dá pra acessar dado dentro de dado?

Dá, e o caminho é o mesmo, só que encadeado

Imagina que uma das propriedades guarda outro objeto dentro dela, com os dados de endereço: você vai descendo com ponto até chegar no valor que interessa

console.log(obj.endereco.cidade)

Sendo o valor uma lista, o acesso é pelo índice, igualzinho array comum de JS: