JSON –Java Script ObjectNotation

(1)

JSON –Java Script Object Notation

Conceitos preliminares, sua estrutura e manipulação

Prof. Giuliano Prado [email protected]

(2)

Por que usa-lo?

• Quando você cria uma aplicação que irá se comunicar com outra aplicação, quer seja ela local ou remota, você esta trocando informações e neste caso um formato de dados e um protocolo de troca deve ser selecionado para que a comunicação seja feita com sucesso. Por sucesso entende-se que quem recebe a informação consegue tratá-la e entender o seu significado.

• Existem uma variedade de opções de protocolos

abertos padronizados, tais como SOAP, XML, etc., que

podem ser adotados e isso vai depender da finalidade

e dos requisitos da sua aplicação.

(3)

Por que usa-lo?

• Dessa forma, JSON é um protocolo leve para intercâmbio de dados e está baseado em um subconjunto da linguagem de programação JavaScript, sendo independente desta e de qualquer linguagem.

▫ JSON lembra XML :

▫ JSON é texto simples

▫ JSON é "auto-descritivo" (legível)

▫ JSON é hierárquico (valores dentro de valores)

▫ JSON pode ser analisado pelo JavaScript

▫ JSON os dados podem ser transportadas usando

AJAX

(4)

Por que usa-lo?

• mas é diferente da XML:

▫ Não utiliza a tag de fechamento

▫ É mais curto e simples

▫ É mais rápido de ler e escrever

▫ Pode ser analisado usando a função eval() do JavaScript

▫ Utiliza matrizes

▫ Não possui palavras reservadas

▫ Possui parser nas principais linguagens e navegadores

• Assim, JSON é menor do que XML, é mais rápido

e mais fácil de analisar.

(5)

Por que usa-lo?

• O motivo principal para usar JSON é que em aplicações web com AJAX, JSON é muito mais rápido e fácil de usar do que XML.

• A sintaxe JSON é um subconjunto da linguagem JavaScript (sendo independente desta repito).

• As principais regras de sintaxe JSON são:

▫ Dados JSON estão definidos aos pares no formato: nome : valor

▫ Os dados são separados por vírgulas ( , )

▫ As chaves { } contém objetos

▫ Os colchetes [ ] expressam matrizes/vetores

(6)

O JSON

• Duas estruturas básicas:

• Uma coleção de pares nome/valor

▫ Em outras linguagens: struct, record, objeto, tabela hash, etc.

▫ Ex.: { "pessoa" : "Bruno“ }

• Uma lista ordenada de valores

▫ Em outras linguagens: arrays, listas, sequência, vector, etc.

▫ Ex.: [ "Futebol", "Basquete", "Volei", "Natação" ]

(7)

O JSON

• Basicamente o JSON se baseia na notação NOME : VALOR, onde NOME pode ser o nome que você deseja usar para identificar um objeto e VALOR o valor deste objeto.

• A sintaxe JSON usa o par NOME : VALOR onde nome é definido entre aspas, seguido por dois

pontos, seguido por um valor:

• Ex:

"nome" : "Macoratti" ,

"font-size" : "14px;"

(8)

O JSON

• Estruturas JSON são universais

▫ Podem ser encontradas em praticamente todas as linguagens

▫ É o que permite o intercâmbio de informações

• O formato JSON é idêntico ao formato de objetos de Javascript

▫ Pode ser facilmente criado e manipulado em Javascript

▫ Não há necessidade de software extra para trabalhar

com JSON em Javascript

(9)

Estrutura de dados JSON

• Valor

• Objeto

• Array

• Número

• String

(10)

Valor

• Pode ser uma string, número, objeto, array ou as

palavras null, true e false

(11)

Objeto

• Conjunto de pares nome/valor

▫ Começa com {e termina com }

▫ Cada nome é seguido por “:” (dois pontos)

▫ Pares são separados por “,” (vírgula)

(12)

Objeto

• Exemplos usando variável para referenciar o objeto:

var pessoa = { "nome" : "Jose Carlos" , "sobrenome" :

"Macoratti" };

var produto = {"ProdutoID":1, "Descricao":"Notebook 14",

"ProdutoNumero":"PRD-5381"};

document.write(pessoa.nome); // retorna “Jose Carlos”

document.write(produto.Descricao); // retorna “Notebook 14”

(13)

Objeto

• Particularmente acredito que quebras de linhas

podem deixar o código mais legível:

(14)

Manipulando um Objeto

• Para acessar, então, um valor de nosso objeto JSON

podemos utilizar o código:

(15)

Manipulando um Objeto

• É possível acessar um objeto JSON usando um loop para facilitar o acesso às propriedades e seus

respectivos valores.

• Veja um exemplo de código.

(16)

Manipulando um Objeto

• É possível agrupar vários objetos no formato JSON, para isso deve-se criar objetos como já vimos

separados por vírgula dentro de colchetes.

• Veja o exemplo a seguir.

(17)

Manipulando um Objeto

• Sintaxe mais comum:

• Agora temos uma situação onde há um array (um

vetor) de objetos, pois temos dois objetos istintos

separados por vírgulas dentro de colchetes.

(18)

Array

• Coleção ordenada de valores

▫ Começa com [e termina com ]

▫ Valores são separados por “,” vírgula

(19)

Arrays

• Exemplo de manipulação 1:

var cores = [ "Azul" , "Branco", "Vermelho", "Amarelo" ];

• Podemos acessar os dados usando a seguinte sintaxe:

(20)

Arrays

• Exemplo de manipulação 2:

var escola = {

"alunos": [

{ "nome":"Jose Carlos" , "sobrenome":"Macoratti" }, { "nome":"Ana" , "sobrenome":"Lima" },

{ "nome":"Pedro" , "sobrenome":"Ramos" } ]

}

• Neste exemplo temos um objeto alunos definido como um array contendo 3 objetos . Cada objeto possui nome e

sobrenome.

(21)

Arrays

• A primeira entrada no objeto array pode ser acessada da seguinte forma:

alunos[0].nome; => retona Jose Carlos

• Para alterar um valor usamos a seguinte sintaxe:

alunos[0].nome = "Teste";

(22)

Array de Objetos

• No caso anterior:

(23)

Usando JSON no HTML

• Como faríamos para colocar as informações de nome, idade e carro no corpo da página HTML ao invés de apenas nos “alerts”?

• Assumindo que foi importado o jQuery em

uma página, que foi criado o bloco de

detecção de estado do DOM e os eventos em

um botão, vejamos um exemplo de código.

(24)

Usando JSON no HTML

(25)

JSON Aninhado

• É possível declarar um objeto JSON dentro

de um objeto JSON, isto é, é possível declarar como o valor de uma propriedade JSON um outro objeto JSON.

• Exemplo:

(26)

Objeto mais complexo

(27)

Descrevendo o objeto

• O exemplo mostra a representação JSON de um objeto que descreve uma pessoa.

• O objeto tem campos string para o nome e sobrenome, um campo número para a idade, contém um objeto que representa o endereço da pessoa, e contém uma lista (uma matriz) de objetos para os números de telefone.

• No exemplo temos a variável agenda contendo os

dados JSON

(28)

Manipulando o objeto

• Podemos usar a função eval( ) para criar o objeto contato JavaScript da seguinte forma:

var contato = eval("(" + agenda + ")");

• Obs: a variável agenda precisa estar envolvida em

parênteses para evitar ambiguidade com a sintaxe

JavaScript.

(29)

A função eval()

• A função JavaScript eval() pode ser usada para converter um texto JSON em um texto JavaScript pois a função eval() usa o compilador JavaScript que irá analisar o texto JSON e um produzir um objeto JavaScript.

• Para evitar um erro de sintaxe o texto precisa ser

envolvido por parênteses.

(30)

Acessando o objeto através de eval()

var contato = eval("(" + agenda + ")");

document.write(contato.nome);

// retorna “Jose Carlos”

document.write(contato.endereco.cidade);

// retorna “Santos”

document.write(contato.telefone[1].tipo);

// retorna “celular”

(31)

Outro exemplo, com array

(32)

eval () x parser

• Como a função eval() pode compilar e executar qualquer JavaScript isso representa um potencial problema de segurança.

• Por isso é mais seguro usar um parser JSON

para converter um texto JSON para um objeto

JavaScript.

(33)

eval () x parser

• Um parser ou analisador JSON irá reconhecer apenas o texto JSON e não vai compilar os scripts.Em navegadores que oferecem suporte nativo a JSON, os parsers JSON também são mais rápidos.

• O apoio ao JSON nativo está incluído nos navegadores mais novos e no mais novo padrão ECMAScript (JavaScript).

▫ Atualmente navegadores como o Firefox e Internet

Explorer incluem características especiais para analisar

(parsers) JSON, sendo esse suporte ao navegador nativo

mais eficiente e seguro do que o usar o recurso eval() do

JavaScript.

(34)

Regras para leitura de um JSON

• A regra básica é: antes de sair escrevendo código, pare e olhe para o JSON.

▫ Veja se ele é um objeto ou array (que é o que a grande maioria das APIs REST retorna hoje em dia): se começa com { é um objeto, se começa com [ é um array.

▫ Depois veja o que tem dentro desse objeto ou array. Se

for um array, procure pelas vírgulas que separam os

elementos e verifique os seus tipos, e preocupe-se com a

ordem em que eles estão, para saber como obter cada

um. Se for um objeto, veja quais são as chaves e os

respectivos valores.

(35)

Regras para leitura de um JSON

• Se o JSON é muito grande e/ou com muitas estruturas aninhadas (objetos dentro de arrays, dentro outros arrays, dentro de outros objetos, etc), formatá-lo ajuda a visualizar a sua estrutura.

• Há vários sites como esse (https://jsonlint.com/),

que validam e formatam um JSON. Além disso, as

linguagens/APIs que trabalham com JSON

geralmente possuem uma opção para formatá-lo

(veremos alguns exemplos mais abaixo).

(36)

Regras para leitura de um JSON

• Outro ponto importante é verificar se o JSON que você está tentando ler é de fato um JSON válido.

Um exemplo clássico é:

Válido ou não???

(37)

Regras para leitura de um JSON

• Inicialmente você pode pensar que, como começa com {, então é um objeto. Mas repare bem: o primeiro objeto (o que tem "nome": "Fulano") termina na quarta linha (onde há o }), e logo em seguida há uma vírgula.

Logo depois, temos outro objeto (o que tem "nome":

"Ciclano").

• Este não é um JSON válido.

• Há dois objetos “soltos”, separados por vírgula. Cada um deles

individualmente é um JSON válido,

mas ter ambos separados por vírgula não é.

(38)

Regras para leitura de um JSON

• O que poderia deixar esta estrutura válida é colocá-la entre [ e ]:

• Pois agora ela se tornou um array com dois objetos. Mas da forma que estava (sem o [ e ]), a estrutura é inválida, e muitas APIs dão erro ao tentar processá-la (ou ignoram o segundo objeto, varia conforme a implementação).

(39)

Leitura e escrita com parse()

• métodos parse (para transformar uma string contendo todo o JSON na estrutura correspondente do JavaScript - ou seja, um array, objeto, string, número, etc);

• e stringify, que faz o oposto (transforma uma

variável do JavaScript em uma string no formato

JSON).

(40)

Leitura e escrita com parse()

• Exemplo:

• No código que mostraremos usamos Template

Strings, por facilitar a criação de uma string com

várias linhas. Veja se seu browser é compatível

com este recurso (caso não seja, há uma

alternativa abaixo, usando uma string tradicional).

(41)

Leitura e escrita com parse()

(42)

Leitura e escrita com parse()

ü Leitura do conteúdo do arquivo na variável json;

ü Acesso aos dados (nome) diretamente;

ü Percorrendo os filmes com a chave ‘filme’;

ü Percorrendo o vetor de contatos, através das chaves ‘tipo’ e

‘contato’ (no FOR concatena os contatos pelo tipo)

(43)

Leitura e escrita com parse()

ü Adicionando um contato novo abaixo dos demais

ü Com a função stringify, transformamos a variável JSON numa string JSON

ü OBS: Se o JSON for inválido, JSON.parse lança um

SyntaxError .

(44)

Leitura e escrita com parse()

Adicionando um contato:

No for

(45)

JSON e JQuery

• Utilizaremos a função jQuery.getJSON, essa função será responsável por obter os dados contidos no nosso json.

• jQuery.getJSON( url, [data], [callback] )

▫ url -> A url requisitada (parâmetro obrigatório)

▫ [data] -> dados que serão enviados via GET (parâmetro opcional)

▫ [callback] -> Função que será executada quando os dados forem carregados com sucesso

(parâmetro opcional)

(46)

JSON e JQuery

• Exemplo de arquivo (data.js):

{

"codigo":"2",

"nome": "Prof. Norton",

" perfil": "Professor",

"horario":"Noite"

}

(47)

JSON e JQuery

$.getJSON( "data.js", function(data){

$('#nome').text(data.nome);

$('#perfil').text(data.perfil);

$('#horario').text(data.horario);

} );

);

(48)

Considerações sobre o JSON

• O poder do JSON não está na notação em si, mas no que se pode fazer dela

• JSON permite a troca de informações entre linguagens de forma leve

• Também é um bom formato para distribuição de conteúdo. P. ex.:

▫ Facebook

▫ Twiter

(49)

Praticando

• EXERCÍCIO 01:

▫ Vamos agora fazer um exercício para praticar.

▫ De início é necessário criar uma página HTML com

jQuery. Crie um botão e faça o evento (click) deste.

(50)

Praticando

• EXERCÍCIO 01:

▫ Neste primeiro exercício você deverá criar um objeto JSON contendo 3 objetos, cada um deles com dois atributos: nome e site.

▫ Ao clicar no botão você deverá transformar o conteúdo deste array JSON em links...

▫ Tag a, sendo que cada TAG terá como atributo

href o valor da propriedade site e o texto do link

será dado pela propriedade texto de cada objeto

JSON.

(51)

Praticando

• EXERCÍCIO 01:

▫ Exemplo:

(52)

Praticando

• EXERCÍCIO 02:

1. Crie um objeto JSON que contenha 5 outros objetos.

Cada um destes deverá conter as propriedades ID, MARCA, MODELO, ANO e VALOR, referentes a uma tabela de exemplo de carros.