JSON com Javascript

O que é JSON?

Pense em uma lista de presença que você precisou preencher em algum momento da sua vida, seja quando você estava na escola, no ensino médio, na faculdade ou em algum curso.

De acordo com a ilustração acima, o coordenador da turma anotava o nome de cada aluno, marcando ao lado se ele(a) se encontrava presente ou não.

A mesma coisa pode ser observada no famoso jogo de lotérica, onde marcamos os números que queremos apostar, para que posteriormente a máquina possa ler esses números de modo transforma-los em um formato digital.

Cartão Perfurador, Lista de Presença, Jogo de Lotérica... o que todos eles tem em comum? Todos eles podem ser considerados um formato para armazenar informações/dados que posteriormente serão lidas por outras pessoas ou quem sabe até outros sistemas.

E com o JSON (Javascript Object Anotation) não é diferente, pois ele é considerado um formato leve e muito simples de ler, usado para trocar informações ou dados com outros sistemas. 

Ele foi lançado no ano de 2001, e foi criado pelo programador americano chamado Douglas Crockford, seu formato é derivado da linguagem padrão do Javascript e segue a sintaxe de um objeto normal.

A sintaxe de um formato JSON consiste em pares de nome-objeto, e pontuação na forma de colchetes, parênteses, ponto-e-vírgula e dois-pontos.

Hoje em dia, esse formato já está tão difundido entre os desenvolvedores, que não só o Javascript oferece suporte ao JSON, como também outras linguagens de programação, como PHP, C#, C++, C, Python... onde cada uma delas contam com bibliotecas capazes de ler e gerar em tal formato.

A sintaxe de um arquivo JSON é a seguinte:

{
"id": 25,
"nome": "Micilini Roll",
"site": "https://micilini.com",
"configuracoes": {
"seguro": true,
"http": false 
}
"tipo": "Educação"
}

Incrível como se parece bastante com os pares de chave-valor como nos objetos em JS, não acha?

Vantagens de um JSON

Existem algumas vantagens de se utilizar o JSON para trocar e armazenar informações ou dados da sua aplicação, vejamos:

Trabalhando com JSON

Em outras linguagens de programação, principalmente aquelas que possuem acesso a criação e edição de arquivos hospedados no servidor ou em máquinas locais (o que não é o caso do Javascript).

Com elas nos conseguimos tanto salvar, quanto editar arquivos em formato JSON, que nada é do que um arquivo de texto que usa a extensão .json, onde armazena um "texto" igual a esse:

{
"id": 25,
"nome": "Micilini Roll",
"site": "https://micilini.com",
"configuracoes": {
"seguro": true,
"http": false 
}
"tipo": "Educação"
}

Para que posteriormente, esse arquivo possa ser lido pelo sistema que você criou, e ser interpretado pelo mesmo.

É importante ressaltar que um arquivo .json não tem mistério algum... tanto que eles podem ser abertos por qualquer editor de texto, ou editor que código que você tenha disponível.

No caso do Javascript, nos precisamos de uma outra linguagem de programação que seja capaz de abrir/enviar conteúdos em formato JSON, e isso pode ser feito por meio do AJAX (que veremos em conteúdos futuros).

Pois bem, existem dois métodos padrão que são oferecidos pela linguagem Javascript para lidarmos com conteúdos em formato JSON, são eles:

JSON.Parse()

O método JSON.parse() analisa uma string JSON, de modo a transforma-la em um Objeto.

const sintaxeJson = '{"nome":"Micilini Roll", "https":true}';

const objJson = JSON.parse(sintaxeJson);

console.log(objJson.nome);//Micilini Roll

console.log(objJson.https);//true

Veja abaixo outros exemplos da utilização deste método:

JSON.parse('{}');// {}
JSON.parse('true');// true
JSON.parse('"foo"');// "foo"
JSON.parse('[1, 5, "false"]');// [1, 5, "false"]
JSON.parse('null');// null

Junto a este método podemos utilizar um reviver. Será por meio dele que o valor calculado pela análise do JSON será transformado antes de ser retornado. É como se fizéssemos uma validação em cada elemento do JSON antes de transforma-lo em um Objeto:

let objJson = JSON.parse('{"numero": 5}', (key, value) =>
typeof value === 'number'
? value * 2 // retorna o valor * 2 para números
: value // retorna tudo sem alteração
);// { numero: 10 }

É importante ressaltar que o JSON.Parse() não permite vírgulas a direita, logo os comandos abaixo retornarão erro:

// ambos retornarão um SyntaxError
JSON.parse('[1, 2, 3, 4, ]');
JSON.parse('{"foo" : 1, }');

JSON.Stringify()

O método JSON.stringify() converte valores em Javascript para uma String JSON.

Esses valores podem ser substituídos especificando a função replacer, ou incluindo somente as propriedades específicas, quando o array do replacer for especificado.

É por meio desse método que conseguimos converter um objeto, um array ou algum outro tipo de dado em formato JSON.

let jsonUm = JSON.stringify({ x: 5, y: 6 });// '{"x":5,"y":6}' ou '{"y":6,"x":5}'

let obj = {nome: "Micilini Roll", https:true}
let jsonDois = JSON.stringify(obj);//

console.log(jsonDois);//'{nome: "Micilini Roll","https":true}'

Outros exemplos do uso do método:

JSON.stringify({});// '{}'
JSON.stringify(true);// 'true'
JSON.stringify('foo');// '"foo"'
JSON.stringify([1, 'false', false]);// '[1,"false",false]'
JSON.stringify({ x: 5 });// '{"x":5}'

Com o replacer nos podemos validar cada elemento antes dele ser inserido dentro do JSON, vejamos:

function replacer(key, value) {
if (typeof value === "string") {
return undefined;
}
return value;
}

var foo = {fundação: "Mozilla", modelo: "caixa", semana: 45, transporte: "carro", mês: 7};
var jsonString = JSON.stringify(foo, replacer);//{"semana":45,"mês":7}.

No caso do comando acima estamos verificando se o valor de cada elemento dentro do objeto é do tipo string, se for, retorna undefined, se não for, retorna o próprio valor.

Nesse caso a versão final do JSON não conterá os elementos nas quais seu valor é uma string.

Conclusão

Neste conteúdo aprendemos um pouco mais sobre JSON e seus métodos de lida e criação.

Até o próximo conteúdo 😄