O que JSON?

Como e quando usar

Objetivo: Entender o funcionamento do JSON aprendendo como us-lo para estruturar informaes
e iterar sobre elas
Pr-requisitos:
Javascript bsico (Array, For, For in)
JSON (sigla para JavaScript Object Notation) um padro para escrever estruturas de dados em
JavaScript.
O JSON nativo do Javascript e apesar de recentemente ter ganhado muita evidncia j esta
disponvel na linguagem h bastante tempo.
Acredito que o JSON ganhou muito destaque nos ltimos tempos por conta do crescimento do
Javascript como linguagem de programao, por oferecer uma maneira bastante confortvel de se
trabalhar com colees de dados diversas.
Resumidamente o JSON se baseia na notao ATRIBUTO : VALOR, onde ATRIBUTO pode ser o
nome que voc quiser para identificar alguma coisa e VALOR o prprio valor desta coisa
Exemplos:
//ATRIBUTO "nome" | VALOR "Bruno Souza"
{"nome":"Bruno Souza"}
//ATRIBUTO "font-size" | VALOR "20px;"
{"font-size":"20px;"}

Ele tem uma estrutura parecida com o XML, logo se voc conhece XML no ter dificuldades para
entender seu funcionamento (mesmo no conhecendo XML, o entendimento do JSON bem
tranquilo, ento se esse o seu caso, no se assuste).
Observe o esquema:
Filme

Ttulo: X-Men Origens: Wolverine

Gnero: Aventura
Durao (min): 107
Ano: 2009

Para representarmos essa estrutura usando JSON, teramos o seguinte cdigo:

var filme = {
"titulo"
"genero"
"duracao"
"ano"
}

:
:
:
:

"X-Men Origens: Wolverine",

"Aventura",
"107",
"2009"

Em XML teramos
<?xml version='1.0' encoding='utf-8'?>
<filme>
<titulo>X-Men Origens: Wolverine</titulo>
<genero>Aventura</genero>
<duracao>107</duracao>
<ano>2009</ano>
</filme>

Podemos incrementar nossa estrutura de forma que haja mais de um filme e que para cada filme
exista um item chamado Elenco e neste coloquemos a lista dos principais atores do filme.
Filme

Filme

Ttulo: X-Men Origens: Wolverine

Gnero: Aventura
Durao (min): 107
Ano: 2009
Elenco:
Hugh Jackman (Logan / Wolverine)
Ryan Reynolds (Wade Wilson / Deadpool)
Liev Schreiber (Victor Creed / Dentes-de-sabre)
Dominic Monaghan (Bradley)
Ttulo: Velozes & Furiosos 4
Gnero: Ao
Durao (min): 107
Ano: 2009
Elenco:
Vin Diesel (Dominic Dom Toretto)
Paul Walker (Brian OConner)
Jordana Brewster (Mia Toretto)
Michelle Rodriguez (Letty)

Para esta nova estrutura fazemos um array de objetos JSON para os filmes (um para cada) e nos
itens elenco um outro array simples de strings (nomes dos atores)
1 var filmes = [
2
{
3
"titulo"
4
"genero"
5
"duracao"
6
"ano"
7
"elenco"
8
"Hugh
9
"Ryan
10
"Liev
11

: "X-Men Origens: Wolverine",

: "Aventura",
: "107",
: "2009",
: [
Jackman (Logan / Wolverine)",
Reynolds (Wade Wilson / Deadpool)",
Schreiber (Victor Creed / Dentes-de-sabre)",

"Dominic Monaghan (Bradley)"

]

12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

},
{
"titulo" : "Velozes & Furiosos 4",
"genero" : "Ao",
"duracao" : "107",
"ano"
: "2009",
"elenco" : [
"Vin Diesel (Dominic \"Dom\" Toretto)",
"Paul Walker (Brian O'Conner)",
"Jordana Brewster (Mia Toretto)",
"Michelle Rodriguez (Letty)"
]
}
]

Vamos analisar a estrutura acima:

Linha 1 - "Abro" o array que conter os JSON's de cada filme utilizando "["
Linha 2 - "Abro" o JSON do primeiro filme
Linha 3 - Crio o primeiro atributo do meu objeto JSON - "titulo"
Observe que para atribuir um valor a um item usa-se ":"
Este atributo poder ser acessado literalmente pelo seu nome
Ex.: filmes[0].titulo
Apesar do atributo "titulo" ter sido declarado com o uso de
aspas ns consiguimos acessa-lo diretamente sem elas.
Isso ocorre porque internamente como se o item se tornasse
uma varivel (ou uma propriedade no conceito OO) do objeto
JSON que representa o filme alocado no ndice ZERO do array
filmes
Linhas 4 a 6 - Repito o mesmo procedimento da linha 3.
Observe que utilizamos a "," para separar os atributos do
objeto JSON
Linha 7 - Crio o atributo "elenco" e a ele eu atribuo um array contendo
os atores do filme
Linha 13 - "Fecho" o JSON
Linhas 14 a 25 - Repito a mesma coisa para o prximo objeto JSON.
Linha 26 - "Fecho" o array de objetos JSON

Vamos ver agora como ler alguns dos dados da nossa estrutura:
filmes;
filmes[0];
filmes[0].ttulo;
filmes[1].elenco[2];

//retorna
//retorna
//retorna
//retorna

um array contendo dois objetos JSON

um objeto JSON
"X-Men Origens: Wolverine"
"Jordana Brewster (Mia Toretto)"

Para iterar em cada um dos filmes do array utilizamos um loop simples

1
2
3
4
5
6
7

for (i=0; i<filmes.length; i++) {

filme = filmes[i];
infosFilme = '';
for(j in filme){
atributo = j;
valor = filme[j];
infosFilme += atributo+':\t'+valor+'\n';

8
9
10 }

}
alert(infosFilme);

Analisando a estrutura acima:

Linha 1 - Fazendo o for para tratar cada um dos filmes
Como "filmes" um array, a propriedade "length" me diz
quantos so os filmes contidos no array
Linha 2 - Atribuo a varivel "filme" o filme do ndice apontado pelo for
Linha 3 - Limpo a varivel "infosFilmes" atribuindo a ela uma string vazia
Linha 4 - Itero em cada um dos atributos do filme, lembrando que os
atributos so: titulo, gnero, durao, ano e elenco
Linha 5 - Pego o nome do atributo j
Linha 6 - Pego o valor do atributo j
Linha 7 - Monto a string "ATRIBUTO: VALOR"

A jQuery usa muito JSON para parametrizar suas funes. Neste link eu mostro como
parametrizarmos nossas prprias funes JS usando JSON.
Para mais detalhes a cerca do JSON visite http://www.json.org