0% acharam este documento útil (0 voto)
17 visualizações31 páginas

Introdução ao JSON: Estrutura e Aplicações

O documento fornece uma introdução ao JSON (JavaScript Object Notation), detalhando suas características, sintaxe e aplicações, como troca de dados via APIs e arquivos de configuração. Ele explica a estrutura de documentos JSON, os tipos de dados suportados e os processos de serialização e desserialização. Além disso, aborda exemplos práticos e a importância do JSON na comunicação entre diferentes linguagens de programação.

Enviado por

Rômulo Ferreira
Direitos autorais
© All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
0% acharam este documento útil (0 voto)
17 visualizações31 páginas

Introdução ao JSON: Estrutura e Aplicações

O documento fornece uma introdução ao JSON (JavaScript Object Notation), detalhando suas características, sintaxe e aplicações, como troca de dados via APIs e arquivos de configuração. Ele explica a estrutura de documentos JSON, os tipos de dados suportados e os processos de serialização e desserialização. Além disso, aborda exemplos práticos e a importância do JSON na comunicação entre diferentes linguagens de programação.

Enviado por

Rômulo Ferreira
Direitos autorais
© All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd

JSON - Fontes: Canal Bóson e Hora de Codar.

1 – O que é JSON ............................................................................. 3

2 – Documentos JSON ...................................................................... 4

3 – Aplicações do JSON .................................................................... 5

4 – JSON – Características ................................................................ 5

5 – Tipos de dados JSON .................................................................. 5

6 – Exemplos de valores numéricos válidos JSON ............................ 6

7 – Caracteres de Escape ................................................................. 6

8 – Serialização ................................................................................ 7

9 – Desserialização .......................................................................... 7

10 – Tokens do JSON........................................................................ 7

11 – Sintaxe básica de um documento JSON .................................... 8

12 – Reforçando a Sintaxe ............................................................. 14

13 – Array de objetos .................................................................... 19

14 – JSON dentro do JavaScript...................................................... 20

15 – Converter Objeto para JSON .................................................. 21

16 – Converter JSON para Objeto .................................................. 25

17 – Sites que você pode verificar o seu JSON................................ 28

 Demonstração ......................................................................... 29
 Referencias .............................................................................. 30

2
JSON - Fontes: Canal Bóson e Hora de Codar.

1 – O que é JSON:

JSON - Acrônimo de JavaScript Object Notation (Notação de Objeto JavaScript)

-Uma forma de escrever objetos JavaScript, mas que pode ser interpretada por outras linguagens, e é
transportada via texto.
(Você pode usar qualquer Linguagem de programação para trocar dados JSON).

-Formato aberto e bastante popular para representação e troca de dados, assim como(similar) XML e YAML
(porém mais leve e simples), que é utilizado para fins parecidos.
(a gente pode estar trabalhando com ele em diversas linguagens, podemos está trabalhando com ele em um cliente site JS, mas
enviando(entrega) para um backend em PHP, em Node, etc, independente da linguagem ele vai está conseguindo interpretar esse
dado pq, vamos dizer, que ele é universal. Ele é muito utilizado hoje em dia para essa questão de está transferindo informações)

-É fácil para humanos ler e editar esse formato, e simples para os computadores processarem e gerarem
dados JSON.

-Criado por (pelo programador) Douglas Crockford, o JSON foi formalizado na RFC 4627, em 2006.
(mas outras RFCs surgiram ao longo do caminho com atualizações e especificações do JSON)

-Baseado em um subconjunto do 'JavaScript', a gramática do JSON está documentada em seu site oficial:
(apesar de ser baseado em JS, ele não tem todas as funcionalidades do JS e a gramatica, a forma que vc escreve o JSON, a fundo,
vc vai encontrar documentado no site oficial, logo a seguir)
[Link]
[Link]/[Link]

-Utiliza o formato de 'chave e valor';


(Como os objetos JS, { nome:valor }, nas variáveis o seu separador é um sinal de igual '=', atribuímos o valor nas variáveis com o
igual, já no JSON vai ser vai ser os dois pontos ':' igual aos os objetos)

3
JSON - Fontes: Canal Bóson e Hora de Codar.

-É leve para ser enviado por requisições;


(Devido a sua simplicidade certo, ele tem menos caracteres desnecessários, digamos assim, a gente vai está enviando basicamente
podado para o servidor, então ele acaba sendo uma ótima escolha por causa disso também)

-Muito utilizado para 'API' e também arquivos de configuração;


(Muitas vezes vc vai encontra o JSON nesse sentido, pra enviar dado de uma API ou receber dados pra uma API, tanto para imprimir
algo no Front-end ou para cadastrar algo na Back-end no banco de dados, é pra essas ações que ele serve pra gente poder se
comunicar de maneira fácil e tb arquivos de configurações, alguns arquivos que a gente trabalha de alguma linguagem ou
framework que pode ser configurado via JSON, como antigamente tb a gente via muito XML pra isso)

2 – Documentos JSON:
- Um documento (objeto) JSON 'é um conjunto não-ordenado de dados' armazenados em um par
"nome":valor (campo), que inicia e termina com chaves { }.
(O JSON ele trabalha com conceito de documentos, eles sempre são armazenados no formato de um par, 'nome' e 'valor', ou
'chave' e 'valor', vou utilizar a terminologia nome e valor, e esse conjunto 'nome e valor' a gente chama 'campo'. Esse documento
vai começar e finalizar com chaves { }.)

-Todos os nomes-chaves são englobados em aspas duplas, e são separados de seus valores por dois-pontos:
(O documento ou objeto JSON inicia com uma chave { e vem com os pares 'nome valor' os 'campos' e finaliza com uma chave }.
Todos os nomes são englobados em aspas duplas "", então vai ter que colocar os nomes em aspas, já os valores podem ou não
usar aspas dependendo do tipo de dado que está sendo representado e daqui a pouco vamos falar dos tipos de dados)

-Os pares (campos) são separados um do outro por vírgulas.


(E a separação do nome do valor é com dois pontos)

"nome":valor
Exemplo:

 Iniciando com uma chave.


 Os nomes entre aspas e seus respectivos valores.
 Observe que os valores são bastante variados.

 Aqui de novo, abrindo e fechando chaves... aqui


um objeto dentro de outro objeto.
 O JSON é bastante flexível e permite a
representação de vários tipos de dados.

4
JSON - Fontes: Canal Bóson e Hora de Codar.

3 – Aplicações do JSON:
-O formato JSON encontra inúmeras aplicações, tais como:
a) Usado para troca de dados (criação e consumo) usando APIs. Isso ocorre, por exemplo, entre navegador
(cliente) e servidor, ou entre servidores.
(a mais óbvia é a troca de dados, ou seja, geração e consumo de dados, por exemplo: entre o seu navegador e um servidor na
internet, ou entre dois servidores, ou entre os servidores e seu navegador, exemplo: vc preencher um formulário Web, você clica
no botão para enviar esses dados eles podem ser enviados no formato JSON se for necessário)

b) Arquivos de configuração de programas e sistemas (.json)


(usado assim, como a gente costumava fazer muito com arquivos 'XML' ou até mesmo 'CSV', hoje a gente pode utilizar o 'JSON',
fica muito mais simples.)

c) Persistência de dados em navegadores e servidores


(usa também para persistência, ou seja, gravar dados, tanto em navegador quanto em servidores e por conta disso tudo ele é o
formato padrão de dados na web.)

d) É o formato de dados padrão na Web atualmente.

e) Muitos formatos são derivados do JSON, como .... GeoJSON e BSON.


(GeoJSON que é um formato para informações geográficas, e o BSON que seria um JSON binário que é utilizado para persistência
de dados em bancos de dados não relacionais como o MongoDB.)
(O JSON tem sua aplicação e tb dá origem a outras aplicações com outros formatos)

4 – JSON – Características:
-Os documentos JSON possuem suporte a diversos tipos de valores(dados), como strings, números de ponto
flutuante, números inteiros, valores booleanos, nulo, arrays e objetos.

-O JSON suporta qualquer nível de hierarquia que seja necessário para o modelo de dados da sua aplicação
onde é usado.
(então você consegue criar qualquer tipo de objeto e representar qualquer tipo de informação não importa o quão complexa ela
seja você consegue representar com o 'JSON')

-O tipo de mídia (MIME) JSON é 'application/json', caso precise ser declarado.


(O tipo MIME para texto JSON)

-O JSON não suporta comentários.

5 – Tipos de dados JSON:


-O JSON suporta quatro tipos de dados primitivos e dois tipos estruturados:

1) String  (0 ou mais caracteres Unicode, entre aspas " ") - "Olá Mundo"
2) Número  (inteiro, ponto flutuante, fração, notação científica) - 1 ou 12.54
Obs: number ou floating, sem aspas.

3) Booleano  (true / false)


4) Nulo  (null)
Obs: serve pra informar que uma chave existe, mas não tem valor, por enquanto tem o valor nulo, só quero enviar essa chave
para API.
5
JSON - Fontes: Canal Bóson e Hora de Codar.

5) Array  (lista ordenada de 0 ou mais valores) - [1, 2, 3]


Obs: arrays (listas), entre colchetes [], aceita qualquer tipo de dado e também outros objetos.

6) Objetos  (lista não-ordenada de pares -> nome:valor, entre chaves{}) - {"nome": "Rômulo"}
Obs: nome + valor, mesma notação.

6 – Exemplos de valores numéricos válidos JSON:


-A seguir temos alguns exemplos de valores numéricos que são válidos na sintaxe JSON:

a) -0.51  positivos ou negativos com o sinal na frente


b) 1/7  frações
c) 250  números inteiros
d) 12.566  números de ponto flutuante
e) .142536  não precisa usar o zero à esquerda e posso usar qtas casas decimais forem necessárias
f) 6.022e+23  números em notação cientifica

7 – Caracteres de Escape (na hora de representar os dados)


-A seguir temos os caracteres de escape válidos em JSON:
(Se eu precisar representar algum desses caracteres dentro de um valor, dentro de um dado JSON eu preciso utilizar o caractere
escape. que começa sempre com essa \ (barra invertida) e na frente vem um caractere que para evitar problemas de interpretação
da informação)

Na prática os caracteres mais comuns, mais importantes são:


a) \/ - Barra  justamente a barra.
b) \\ - Barra invertida  a barra invertida, por ex., que a gente usa para fazer um caminho de
diretórios.
c) \" - Aspas duplas  as aspas duplas, pq elas são usadas justamente para representar os nomes
e valores de strings, então se quiser usar aspas duplas dentro do valor eu vou precisar do caractere escape.
d) \uXXXX - Unicode UTF-16 XXXX  para você poder representar qualquer caractere por exemplo em
outros alfabetos
e) \b – Backspace  os outros caracteres com característica padrão que a gente pode
usar isso tb dentro de um documento JSON (idem com o resto abaixo).
f) \f - Form feed
g) \t – Tabulação
h) \n - Quabra de linha
i) \r - Retorno de carro

OBS: Em JavaScript , os valores podem ser todos os itens acima, além de qualquer outra expressão
JavaScript válida, incluindo:
-function (função)
-date (encontro)
-undefined (indefinido)

-Dois conceitos importantes para se ter em mente quando se trabalha com JSON, são os conceitos de
serialização e desserialização.
6
JSON - Fontes: Canal Bóson e Hora de Codar.

8 – Serialização:
-Processo de captura de uma estrutura de dados (objeto) para que ela possa ser armazenada, transmitida e
posteriormente reconstituída.
(Bem simples é capturar um objeto ou uma estrutura de dados e transformar em um documento json para poder fazer o envio e o
tratamento em um outro local)

-Na prática, cria um texto JSON válido com os dados contidos na estrutura.
(Ela cria um texto json que é válido)

-Métodos especiais podem realizar a serialização de uma estrutura que contenha dados, como o método
[Link].
(Pra isso temos metodos especiais, por exemplo em JS a gente vai ter o '[Link]' isso significa que vc não vai escrever o
documento json na mão, vc vai ter um método dentro de uma linguagem de programação que vai pegar os seus dados de algum
local e vai criar o documento json a partir desses dados, a gente pode escrever na mão, e eu vou escrever na mão que vou mostrar
um escrito na mão como exemplo mas a pratica não é assim que a gente trabalha é sempre fazendo a serialização)

9 – Desserialização:
-Processo inverso ao da serialização, permite converter JSON válido em valores e objetos que possam ser
usados em um programa - ou seja, reconstitui a estrutura de dados.
(Quer dizer ao receber um documento JSON eu quero separar e obter os dados que estão ali armazenados, esse é o processo de
desserialização ou parsing)

-Também chamado de 'parsing'.

-Métodos especiais realizam a desserialização de dados JSON, como o método [Link].


(Toda linguagem de programação que suporta JSON, tem suporte a esses dois processos com métodos específicos, ou seja Java,
Python, C#, JavaScript evidentemente, todos eles fazem esses dois processos.)

10 – Tokens do JSON:
-O JSON possui alguns caracteres estruturais usados como tokens:

7
JSON - Fontes: Canal Bóson e Hora de Codar.

11 – Sintaxe básica de um documento JSON:


A sintaxe JSON é um subconjunto da sintaxe JavaScript.
 Sintaxe simples:

Primeiro modelo:

 começando com chave {.


 começa os pares, chave + valor (dependendo, entre “ “), esse no caso tem pq é um 'string'.
 number (valor é número).
 array (valor inicia com colchete [).
 elementos do array (vc tem string, um nº floating e outra string), lembrando de separar por virgula.
 finaliza o array com colchete.
 valor lógico boolean (true ou false sem aspas)
 também posso ter um obj dentro de um obj (com nome de identificação e abro com chave também)
 nome e valor.
 fecho o meu objeto com colchete também.
 terminando com chave.

Segundo modelo:

 inicializar ele como um obj. JS, abrindo e no final fechando com chaves { }.
 chave + valor, "chave" entre aspas seguido por 2 pontos e o valor que
representa essa chave, como é uma string tem que tá entre aspas tb.
 valor boolean (true ou false).
 inicia um novo JSON praticamente, um objeto dentro do objeto. começa
com chave e termina com chave. e se repeti, nome + valor entre aspas “ ”.
 duplas, mesmo padrão do JSON (o JSON pai).

 trabalhando com array [ ], dentro do JSON.

OBS: No caso do valor é number (linha 3), não precisa de aspas. o VSCode tem uma checagem de sintaxe, se
errar ele mostra o que determina (o que é o erro).

8
JSON - Fontes: Canal Bóson e Hora de Codar.

 Outro exemplo de JSON:

 tipo string (texto).


 tipo número flutuante (floating)
 tipo array [ ].

 Testamos no navegador:

Uma string dentro de uma variável de


nome frutas:

'var = frutas'
, entre as tags

<script> </script>
, lembrando das crases ou backticks,

``
que é utilizada para colocar uma
estrutura JavaScript dentro de uma
variável, respeitando inclusive as
quebras de linha, funções, etc.

9
JSON - Fontes: Canal Bóson e Hora de Codar.

 Aqui foi solicitado, via [Link], a impressão(print) na tela do navegador


Vai mandar mostrar o conteúdo da variável frutas.

 Console do Navegador.

Representação do nosso dado JSON.

Os elementos.

Os pares chave-valor.

Todos eles, inclusive o array de tipo de bananas.

E a origem que é o Brasil.

10
JSON - Fontes: Canal Bóson e Hora de Codar.

 Chamando o método parse que vai mandá-lo parsear ou


desserializar a variável frutas que contém um JSON.

 O [Link] permite que agora você


separe os elementos e inclusive tenha
acesso individual a cada um deles. Assim
você consegue tratar a informação
utilizando um JSON.

11
JSON - Fontes: Canal Bóson e Hora de Codar.

 O cinco (5) é um array.

 Elementos separados

 A contagem começa com 0 (zero)

 Acessar um elemento em particular, pois eu não quero todos os dados das frutas,
eu quero somente a origem. Origem é o nome de um daqueles pares chave-valor.
Vou adicionado apenas ‘.origem’ na linha do [Link] (como na figura ao lado).

12
JSON - Fontes: Canal Bóson e Hora de Codar.

Olha aqui, ao invés de aparecer todo o


conteúdo, aparece apenas Brasil.

 Existe suporte a unicode, por exemplo, vamos supor que queremos


exibir um carácter único diferente, eu vou alterar esse JSON
acrescentando uma vírgula e colocando mais um par
chave-valor que eu vou chamar de caractere, dois pontos,
vamos supor barra U, que é unicode, 3071, esse é um
caractere unicode.

13
JSON - Fontes: Canal Bóson e Hora de Codar.

Salvo e mando recarregar a página, dou um F5, vai aparecer o


caractere, ignore a palavra caracctere escrita de forma errada.
Vai aparecer o caractere no idioma Japonês.
Tem suporte unicode e você consegue trabalhar
tranquilamente com o JSON.

12 – Reforçando a Sintaxe:

OBS: Entenda uma coisa sobre a sintaxe, no JSON ele não aceita uma coisa, não posso colocar uma virgula e
não ter outra 'chave' depois, essa última chave, por mais que ela seja válida o JSON não aceita isso, é preciso
tirar a última virgula da última propriedade, bom entender isso porque pode dá um erro no futuro, qualquer
JSON que você for criar (o resto, separe todas as propriedades por vírgula).

Exemplo:
-Errado:

 JSON ele não aceita uma coisa, não


posso colocar uma virgula e não ter outra
'chave' depois. (outro par chave + valor).

14
JSON - Fontes: Canal Bóson e Hora de Codar.

-Correto:

Exemplos:
-Errado:

15
JSON - Fontes: Canal Bóson e Hora de Codar.

-Correto:

 Sintaxe: Array de objetos

16
JSON - Fontes: Canal Bóson e Hora de Codar.

OBS2: Também reclama se colocar aspas simples '', o certo é aspas duplas "". Tudo isso vai ser interpretado
pelo servidor, digo a sintaxe, é um padrão que é obrigado a seguir.
Só reforçando:
-A separação de valores por dois pontos ':'
-Cada propriedade separada por virgula.
-Algumas propriedades não precisam de aspas duplas, como os números e os booleans, mas quando é texto precisa.
-Não pode colocar uma virgula se não tenho (continuar) uma propriedade seguindo e nem uma virgula se não tem um
item seguindo, tem que ter algo além quando coloco uma vírgula.

 Exemplo: Colocando o JSON dentro de um arquivo '[Link]'. Observar a sintaxe.

-Aqui tenho um HTML que ele basicamente linka um arquivo de JS pra mim que está na sua pasta.
-Agora vai ser preciso transformar esse dado (código) para enviar para uma 'API' ou receber esse dado e
transformar por um objeto para conseguir utilizar na nossa aplicação.
-Cópia e cola dentro do '*.js', pra depois jogar no *.html.

17
JSON - Fontes: Canal Bóson e Hora de Codar.

-O (src="js/[Link]") linka o arquivo JS pra mim, que fica dento da pasta [Link]. Dentro desse arquivo
tem o JSON que foi criado.

-O JS puro ele simplifica o código JSON, algumas coisas que não são permitidas na sintaxe do JSON, no JS é

18
JSON - Fontes: Canal Bóson e Hora de Codar.

13 – Array de objetos:

OBS: Objeto JSON ≠ Objeto JavaScript

O JS é mais simples e o JSON um pouco mais rigoroso, no sentido de tratamento de dados, sintaxe (aspas e
virgulas), etc.

19
JSON - Fontes: Canal Bóson e Hora de Codar.

14 – JSON dentro do JavaScript:


Exemplo:

-Preciso enviar esse cara lá para minha API não posso enviar ela daquele jeito, (o tipo de dados que foi
falado, que pode ser compartilhado, é uma convenção seria o JSON) apenas com o [Link](objs).
-Como eu vou transferir, vou transformar um objeto JS, descrito um array de objetos em um JSON válido?
-Tenho acesso a um objeto chamado JSON e aqui no JS tem alguns métodos para lidar com isso ok

20
JSON - Fontes: Canal Bóson e Hora de Codar.

 Navegador com array – print console:

// JSON
15 – Converter Objeto para JSON:

OBS: O JavaScript também possui uma função integrada para converter um objeto em uma string JSON:

[Link]()

ATENÇÃO:
Um uso comum do JSON é trocar dados de/para um servidor web.
Ao enviar dados para um servidor web, os dados devem ser uma string.
Converta um objeto JavaScript em uma string com [Link]().

const jsonData = [Link](objs) = Agora preciso imprimir esse cara como JSON, mas primeiro preciso
fazer a conversão, então vou dizer que esse cara é um JSON, variável const informando o nome jsonData, e
aqui vou utiliza do objeto JSON, o método stringify, ou seja quando o JSON ele é transferido lá para a API,
ele é transferido como texto, mas esse método aqui vai garantir que ele seja um texto com JSON válido.
[Link](objs) essa é a constante que eu criei com os objetos lá de cima.

21
JSON - Fontes: Canal Bóson e Hora de Codar.

[Link](jsonData) = Esse cara nada mais é do que um texto (jsonData). Aqui vai imprimir no console.

 typeof = tipo de
Ele vai mostrar a string.

[Link](typeof jsonData) = Ele conseguiu converteu com sucesso um objeto ou melhor um array de
objetos para JSON. O typeof vai entregar(mostrar) uma string, então para o JS é considerado texto, o JS não
tem um tipo chamado JSON.

 Pelo que a gente aprendeu, apesar de ser um simples texto, esse cara aqui é sim um JSON válido.

22
JSON - Fontes: Canal Bóson e Hora de Codar.

 EXTRA:
-Stringify um objeto JavaScript.
Imagine que temos este objeto em JavaScript:
const obj = {name: "John", age: 30, city: "New York"};

Use a função JavaScript [Link]()para convertê-lo em uma string.


const myJSON = [Link](obj);

ATENÇÃO: O resultado será uma string seguindo a notação JSON.

myJSON agora é uma string e está pronta para ser enviada para um servidor:
Exemplo:
const obj = {name: "John", age: 30, city: "New York"};
const myJSON = [Link](obj);

-Stringify um Array JavaScript


Também é possível stringify arrays JavaScript:
Imagine que temos este array em JavaScript:
const arr = ["John", "Peter", "Sally", "Jane"];

Use a função JavaScript [Link]()para convertê-lo em uma string.


const myJSON = [Link](arr);

ATENÇÃO: O resultado será uma string seguindo a notação JSON.

myJSON agora é uma string e está pronta para ser enviada para um servidor:
Exemplo:
const arr = ["John", "Peter", "Sally", "Jane"];
const myJSON = [Link](arr);

23
JSON - Fontes: Canal Bóson e Hora de Codar.

-Storing Data (Armazenando dados)


Ao armazenar dados, os dados devem estar em um determinado formato e, independentemente de onde
você escolher armazená-los, o texto é sempre um dos formatos legais.

JSON torna possível armazenar objetos JavaScript como texto.


Exemplo:
Armazenando dados no armazenamento local

// Storing data(Armazenando dados):


const myObj = {name: "John", age: 31, city: "New York"};
const myJSON = [Link](myObj);
[Link]("testJSON", myJSON);

// Retrieving data(Recuperando dados):


let text = [Link]("testJSON");
let obj = [Link](text);
[Link]("demo").innerHTML = [Link];

-Exceções -> Stringify Datas:


Em JSON, objetos de data não são permitidos. A [Link]() função converterá quaisquer datas em
strings.
Exemplo:
const obj = {name: "John", today: new Date(), city : "New York"};
const myJSON = [Link](obj);

Você pode converter a string de volta em um objeto de data no receptor.

-Funções de Stringify
Em JSON, as funções não são permitidas como valores de objeto.
A [Link]()função removerá todas as funções de um objeto JavaScript, tanto a chave quanto o valor:
Exemplo:
const obj = {name: "John", age: function () {return 30;}, city: "New York"};
const myJSON = [Link](obj);

OBS: Isso pode ser omitido se você converter suas funções em strings antes de executar a [Link]()
função.
Exemplo:
const obj = {name: "John", age: function () {return 30;}, city: "New York"};
[Link] = [Link]();
const myJSON = [Link](obj);

24
JSON - Fontes: Canal Bóson e Hora de Codar.

ATENÇÃO: Se você enviar funções usando JSON, as funções perderão seu escopo e o receptor terá que usar
eval() para convertê-las novamente em funções.

16 – Converter JSON para Objeto:

OBS: JavaScript tem uma função integrada para converter strings JSON em objetos JavaScript:

[Link]()

ATENÇÃO:
Um uso comum do JSON é trocar dados de/para um servidor web.
Ao receber dados de um servidor web, os dados são sempre uma string.
Analise os dados com [Link]()e os dados se tornam um objeto JavaScript.

const objData = [Link](jsonData)  E agora? como fazer o contrário? Como fazer para receber esse
dado JSON, e está transformando ele em um array de objetos novamente. Já que o JS não lida com JSON. É
simples também vou trabalhar com o mesmo objeto JSON. Vai usar a constante const e vai ter que usar o
método parse para converter o JSON para um objeto válido, nesse caso um texto JSON válido para um objeto
válido JavaScript.

Está trabalhando com o mesmo objeto


JSON (objData), usando o método parse,
que vai converter o JSON para Objeto
válido.
A ideia para trabalhar com a API é a
mesma, não muda nada, vai enviar um
texto como JSON e vai receber um texto
como JSON e que vai transformar em
objeto.

Print na tela de console do navegador.

25
JSON - Fontes: Canal Bóson e Hora de Codar.

[Link](objData)  Aqui ele vai mostrar novamente aquele objeto que estava lá em cima do código,
que é o dado original
[Link](typeof objData)  Aqui ele vai mostrar que aqui agora é um object (objeto). Vai checar o tipo
de dado.

[Link]((pessoa)  { Método comum para percorrer Arrays de objetos, e tá fazendo essa impressão
de dados na tela
[Link]([Link])  Aqui só a impressão do nome.
})

OBS: Essa conversão Objeto para JSON e JSON para Objeto só é feito dentro do JavaScript, basicamente é o
que é feito no dia a dia.

26
JSON - Fontes: Canal Bóson e Hora de Codar.

ATENÇÂO:
Você pode receber texto puro de um servidor e usá-lo como um objeto JavaScript.
Você pode enviar um objeto JavaScript para um servidor em formato de texto puro.
Você pode trabalhar com dados como objetos JavaScript, sem análises e traduções complicadas.

 EXTRA:
Exemplo - Parsing JSON:
Imagine que recebemos este texto de um servidor web:
'{"name":"John", "age":30, "city":"New York"}'

Use a função JavaScript [Link]()para converter texto em um objeto JavaScript:


const obj = [Link]('{"name":"John", "age":30, "city":"New York"}');

CUIDADO: Certifique-se de que o texto esteja no formato JSON, caso contrário você receberá um erro de
sintaxe.

-Array como JSON:


Ao usar o [Link]()em um JSON derivado de uma matriz, o método retornará uma matriz JavaScript, em
vez de um objeto JavaScript.
Exemplo:
const text = '["Ford", "BMW", "Audi", "Fiat"]';
const myArr = [Link](text);

Exceções: Parsing Dates (Datas de análise)


Objetos de data não são permitidos em JSON.
Se você precisar incluir uma data, escreva-a como uma string.
Você pode convertê-lo novamente em um objeto de data mais tarde:

Exemplo:
Converter uma string em uma data:
const text = '{"name":"John", "birth":"1986-12-14", "city":"New York"}';
const obj = [Link](text);
[Link] = new Date([Link]);

[Link]("demo").innerHTML = [Link] + ", " + [Link];

Ou, você pode usar o segundo parâmetro, da [Link]()função, chamado reviver .


O parâmetro reviver é uma função que verifica cada propriedade, antes de retornar o valor.

27
JSON - Fontes: Canal Bóson e Hora de Codar.

Exemplo:
Converta uma string em uma data, usando a função reviver :
const text = '{"name":"John", "birth":"1986-12-14", "city":"New York"}';
const obj = [Link](text, function (key, value) {
if (key == "birth") {
return new Date(value);
} else {
return value;
}
});

[Link]("demo").innerHTML = [Link] + ", " + [Link];

-Parsing Functions (Funções de análise):


Funções não são permitidas em JSON.
Se você precisar incluir uma função, escreva-a como uma string.
Você pode convertê-lo novamente em uma função mais tarde:

Exemplo:
Converta uma string em uma função:
const text = '{"name":"John", "age":"function () {return 30;}", "city":"New York"}';
const obj = [Link](text);
[Link] = eval("(" + [Link] + ")");

[Link]("demo").innerHTML = [Link] + ", " + [Link]();

ATENÇÃO: Você deve evitar usar funções em JSON, as funções perderão seu escopo e você teria que usá
eval()-las para convertê-las novamente em funções.

17 – Tem alguns sites que você pode verificar se o seu JSON não está válido:

Outros sites para verificar JSON:

[Link]
[Link]
[Link]
[Link]
28
JSON - Fontes: Canal Bóson e Hora de Codar.

Demonstração:

29
JSON - Fontes: Canal Bóson e Hora de Codar.

Referencias:
O que é JSON - JavaScript Object Notation
Fábio dos Reis - Bóson Treinamentos
[Link]

Aprenda JSON em 20 minutos


Matheus Battisti - Hora de Codar
[Link]

30
JSON - Fontes: Canal Bóson e Hora de Codar.

31

Você também pode gostar