JSON – Aprenda a usar essa poderosa linguagem

1. Encontre seu código
›
2. JavaScript
›
3. JSON – Aprenda a usar essa poderosa linguagem

---

JSON (JavaScript Object Notation), ou seja, linguagem de objetos em JavaScript. Já escrevemos sobre o poder dos objetos no JavaScript, você pode ler mais em Objetos no JavaScript [A RAIZ DA LINGUAGEM], nesse artigo mostramos basicamente, como utilizar o JSON com funções no JavaScript e assim criar uma poderosa biblioteca, conjunto de funções ou escopo.

O que é JSON

JSON é uma sintaxe aberta no JavaScript, é uma maneira de se transmitir dados, sendo esses, vários tipos de dados, até funções por exemplo.

Exemplos de JSON

Se olharmos o script do Google nesse site, iremos ver:

Na imagem acima, estamos vendo um arquivo em Javascript do Google e que utiliza o JSON dentro dele.
A variável data, foi declarada para conter o JSON, que contém vários dados, como versão do script e outros.

Logo, perceba, se o Google utiliza o JSON para formatar seus scripts e funções, você também deveria usá-lo. Quero reforçar para que veja o artigo Objetos no JavaScript [A RAIZ DA LINGUAGEM] depois de ler esse.

Regras para escrever JSON

• Precisa estar dentro de chaves { }.
• Precisa de um índice, e todo índice deve ser escrito por aspas duplas.
• Após o índice, é necessário ter dois pontos : para atribuir um valor.
• O valor vem logo após os dois pontos.

Exemplo:

{
"idade": 23,
"nome": "Pedro Soares"
}

Sempre precisamos atribuir o JSON em uma variável, pois, assim poderemos utilizar ele:

let data = {
"idade": 23,
"nome": "Pedro Soares"
}

Navengando / lendo o JSON

Para ler algum dado do nosso JSON, é muito simples:

data.idade;
//Irá acessar o valor 23

Pois, assim, acessamos a propriedade desejada. O . (ponto) é o que navega dentro do json. Um exemplo:

let data = {
"idade": 23,
"nome": "Pedro Soares",
"imc": {
   "altura": 1.73,
   "peso": 93
}
}

Se desejarmos acessar a altura do nosso JSON:

data.imc.altura;
//Irá imprimir 1.73

Todos esses exemplos podem ser copiados e colados no console do navegador

Incrementando JSON

Para adicionar um valor, basta que você associe um valor JSON {} a uma variável. Depois disso, basta colocar o nome da propriedade atribuída a um valor, exemplo:

let novoJson = {};
novoJson.nome = "Pedro Soares";
novoJson["idade"] = 29;
console.log(novoJson);
//Irá imprimir a estrutura do novoJson com as novas propriedades.

É muito simples.

Podemos adicionar um array por exemplo:

let novoJson = {};
novoJson.numeros = [];
novoJson.numeros.push(1);

Por que adicionar arrays no JSON?

Imagine que você tem um JSON com uma propriedade chamada clientes, mas, você pode ter vários clientes, logo, você precisa poder armazenar vários conjuntos de valores dentro de um array em uma propriedade chamada clientes.

Se não tivéssemos o array, só poderíamos armazenar um valor em JSON, logo, armazenamos vários JSONS usando o array. Exemplo:

let outroJson = {
    "clientes": []
};
outroJson.clientes.push(
  {
    "nome":"Henrique",
    "empresa": "XXX"
  }
);
outroJson.clientes.push(
  {
    "nome":"Fabio",
    "empresa": "YYY"
  }
);
outroJson;
//Veja como ficou a estrutura no console do navegador

Funções dentro de um arquivo JSON

Um arquivo JSON se pode por praticamente tudo, até funções, por exemplo, imagine que você esta fazendo uma funcionalidade para um website ou um app que seja para calcular o IMC. Você poderia colocar funções separadas no código, porém, isso é pouco recomendado devido a organização e estrutura do código. Um bom padrão é você organizar seu código em entidades. Logo, iriamos criar uma constante chamada imc e nela associar um objeto que será um JSON:

const imc = {
   altura:1.79,
   peso: 90,
   calcular(){
     return this.peso / (altura * altura)
   },
   init(){
     this.calcular();
   }
}
imc.init();

Veja, nosso código ficou específico, e tudo que for relacionado ao IMC, iremos apenas incrementar nosso JSON.
Isso faz com que seu código seja elegante e legível.
Perceba que se chamarmos, imc.calcular(), ele irá fazer o calculo que desejamos. Então, por que criamos outra função chamada init() ?

A função init e o JavaScript e objetos

A função init é um “padrão” útil para organização do código, imagine que você tenha outros métodos que precisem ser inicializados, como por exemplo, um para pegar o número de refeições, outro para pegar atividades físicas e outro para medir o açúcar no sangue, tudo isso seria muito oneroso, pois, teríamos que ficar chamando linha por linha fora do nosso JSON, isso iria causar uma desorganização, com isso, criamos outra função chamada init, chamamos as funções de inicialização nela e chamamos apenas ela.

Nota: O nome init é “padronizado”, eu poderia ter colocado qualquer nome.

Apagando propriedades JSON

Para apagar propriedades JSON, basta utilizar o comando delete:

let json = {
"nome":"Pedro"
};
delete json.nome;

Simples né?

Strings em JSON

As vezes, vamos precisar salvar um JSON em um banco de dados de forma serializada, ou seja, como uma string, com isso, quando resgatamos esse valor, ele vem como uma string ao invés de um formato JSON, e para isso temos a função JSON.parse:

let jsonText = '{"nome":"Pedro"}'
JSON.parse(jsonText);

Pronto, assim podemos usar o nosso valor conforme JSON.

JSON.parse

Vamos supor que há algum dado que precise de algum tratamento, ou seja, modificação dentro do nosso JSON, mas, queremos que isso seja tratado enquanto o texto é convertido em JSON.

Com isso usamos o segundo parametro da função JSON.parse, que é um callback. Vamos continuar o exemplo anterior:

JSON.parse(jsonText,function(propriedade,valor){
   return valor.toUpperCase();
})

Isso fará com que todos valores sejam passados para maiúsculo durante a conversão.

Isso é muito interessante, pois, podemos cuidar que nossos dados sejam convertidos ou tratados antes de termos eles. Você pode usar condicionais dentro desse callback, o código que desejar e só no final dele colocar o return por exemplo.

Serializando o JSON

Da mesma maneira que passamos de texto para JSON, podemos mandar o JSON para texto, apenas serializando ele:

let jsonText = {"nome":"Pedro"};
JSON.stringify(jsonText);

Pronto!

Considerações sobre o JSON

O JSON é extremamente útil. Podemos criar informações para enviar para uma API ou uma rota (enpoint ou URL) para receber dados. Utilizamos por padrão, o XML ou JSON para trafegar informações entre sistemas e nos nossos sistemas.
O JSON é uma linguagem extremamente útil, pois, podemos criar um objeto organizado para nossas funções e comandos do programa.
Cabe apenas a você saber utilizá-lo.