JSON + JavaScript

O que é JSON e como trabalhar com ele com JavaScript?

A princípio JSON pode parecer um pouco assustador, mas estudando um pouco mais a fundo será perceptível que ele não morde.

Mas o que é JSON afinal? JSON é um acrônimo para JavaScript Object Notation. OK, eu sei que você já leu isso milhares de vezes, mas é exatamente isso, o nome já diz muito sobre o que se trata. É uma maneira de formatar dados de forma semelhante a um Objeto em Javascript. Veja um exemplo de um JSON:

{"nome":"João", "sobrenome":"Silva"}

Observe que a estrura do arquivo é muito similar de sua forma em objeto em Javascript. Mas, em JSON as chaves(keys) precisam ser uma String (com aspas duplas), enquanto no JavaScript elas podem ser String(com aspas duplas, simples ou sem aspas), Numbers ou Symbols

{nome:"João",sobrenome:"Silva"}

Mas há mais diferenças, os valores contidos em JSON são limitados a estes:

•  String
•  Numeros
•  Objtos
•  Arrays
•  Booleanos
•  NULL

No caso de JavaScript, ainda podemos acrescentar, a estes acima, os seguintes:

•  Funções
•  Datas
•  UNDEFINED

Com uma clara limitação e definição de padrões, torna JSON um formato agnóstico de linguagem. Não é por menos que é um dos formatos mais utilizados para transmistir dados entre aplicativos na Web.

Mas como lidar com JSON em JavaScript? Há dois métodos que são usados na conversão: JSON.stringify() e JSON.parse().

JSON.stringify() - utilizado para converter um Objeto JavaScript em JSON.

A conversão entre objeto da linguagem p/ JSON é conhecida como "Serializing".

A sintaxe completa seria: JSON.stringify(value, replacer, space).

value = valor seria justamente os dados a serem convertidos.

replacer = opcional, permite modificar o valor a ser serializado

space = opcional, espaços em branco para melhor representação visual

const cliente = {
 nome:"João", sobrenome:"Silva",
}
const dados_json = JSON.stringify(clientes);

console.log(typeof cliente); // "object"
console.log(typeof dados_json); // "string"
console.log(dados_json); // {nome:"João", sobrenome:"Silva"},

JSON.parse() - utilizado para converter JSON para um Objeto JavaScript.

Um exemplo de uso: converter dados requisitados de uma API.

Esta conversão também é conhecida como "Deserializing".

A sua sintaxe completa é: JSON.parse(text, reviver)

text = string a ser convertida

raviver = opcional, permite modificar o valor antes de retornar

const json_encoded = '{"nome":"João", "sobrenome":"Silva"}'

const dados_json = JSON.parse(json_encoded);

console.log(typeof dados_json); // object
console.log(dados_json.nome); // João

Pronto, agora não precisa mais se assustar quando ler 'JSON', 'parse', 'serialize' ou 'deserialize'.

Referências:

https://www.json.org/json-en.html

https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/Objects/JSON

https://www.w3schools.com/js/js_json_parse.asp

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

https://www.w3schools.com/js/js_json_stringify.asp

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify