JSON, como funciona?

JSON é o acrônimo para a JavaScript Object Notation que é um formato leve de troca de dados, auto descritivo, fácil de entender e independente de linguagem.

O JSON utiliza a syntax JavaScript, porém, é um formato text only (apenas texto) que pode ser lido e escrito como dados em qualquer linguagem de programação.

Quando é necessário transferir dados entre o servidor e o navegador, os dados devem ser apenas texto. JSON é um texto que pode ser convertido a partir de qualquer objeto javascript e ser enviado diretamente do navegador para o servidor ou do servidor para o navegador

Para converter um objeto javascript para uma string json é simples, basta utilizar o método stringify:

Imagem 1: Transformando objeto em JSON

O processo inverso também é muito simples, basta utilizar o método parse, para converter uma string JSON para um objeto JavaScript:

Imagem 2: Transformando JSON em objeto

Usando local storage para salvar e recuperar os dados no navegador

Image 3: Utilizando JSON com local storage do navegador

O método setItem é utilizado para salvar os dados como uma string com um índice chamado “json” e o método getItem recupera o valor do local storage, informando o respectivo indice como argumento.

Se você quer continuar recebendo conteúdo de programação em vídeo, se inscreva no canal Lucas Silva no youtube para receber novidades, clique aqui.

Regras de syntax

Os dados são escritos em pares de chave/valor e separados por virgula, os objetos são envolvidor por chaves e os arrays por colchetes. O formatos JSON é quase idêntico aos objetos JavaScript.

Em JSON, as chaves são strings escritas entre aspas duplas

Imagem 4: Objeto JSON

Em JavaScript, as chaves podem ser strings, numeros ou nomes de identificadores

Imagem 5: Objeto JavaScript

Os valores em JSON podem ser string, numericos, objeto JSON, array, booleano ou nulo.

Em JavaScript, os valores podem ser os mesmos relacionados ao JSON, além das expressões válidas em JS: função, datas, undefined.

Em JSON, as strings precisam ser escritas com aspas duplas enquanto em JavaScript os podem ser escritas tanto com aspas simples quanto com aspas duplas.

Os arquivos JSON têm a extensão “.json” e o MIME type para o formato JSON é “application/json”.

Exemplo de um objeto JSON:

Imagem 6: Objeto JSON completo

Os dados são, respectivamente, string (nome), nulo (sobrenome), number ou numérico (idade), booleano (ativo), objeto JSON e array.

É necessário ressaltar que para usar o método stringify em atributos cujo valor é uma função é necessário utilizar o método toString.

Imagem 7: Transformação de objetos com funções