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 !rra"# $or# $or % in&
JSON si'la para JavaScript Ob(ect Notation& um padr)o para escrever estruturas de dados em
JavaScript*
O JSON nativo do Javascript e apesar de recentemente ter 'an+ado muita evid,ncia ( esta
dispon-vel na lin'ua'em + bastante tempo*
!credito que o JSON 'an+ou muito destaque nos .ltimos tempos por conta do crescimento do
Javascript como lin'ua'em de pro'rama)o# por oferecer uma maneira bastante /confortvel0 de se
trabal+ar com colees de dados diversas*
1esumidamente o JSON se baseia na nota)o !213452O : 6!7O1# onde !213452O pode ser o
nome que voc, quiser para identificar al'uma coisa e 6!7O1 o pr8prio valor desta coisa
E9emplos:
//ATRIBUTO "nome" | VALOR "Bruno Souza"
{"nome":"Bruno Souza"}

//ATRIBUTO "font-size" | VALOR "20p!"
{"font-size":"20px;"}
Ele tem uma estrutura parecida com o :;7# lo'o se voc, con+ece :;7 n)o ter dificuldades para
entender seu funcionamento mesmo n)o con+ecendo :;7# o entendimento do JSON bem
tranquilo# ent)o se esse o seu caso# n)o se assuste&*
Observe o esquema:
$ilme
2-tulo: :-;en Ori'ens: <olverine
=,nero: !ventura
>ura)o min&: ?@A
!no: B@@C
Para representarmos essa estrutura usando JSON# ter-amos o se'uinte c8di'o:
var filme = {
"titulo" : "X-Men Origens: ol!erine""
"genero" : "#!entura""
"$ura%ao" : "&0'""
"ano" : "200("
}
Em :;7 ter-amos
<?xml !ersion=)&*0) en%o$ing=)utf-+)?>
<filme>
<titulo>X-Men Origens: ol!erine</titulo>
<genero>#!entura</genero>
<duracao>&0'</duracao>
<ano>200(</ano>
</filme>
Podemos incrementar nossa estrutura de forma que +a(a mais de um filme e que para cada filme
e9ista um item c+amado /Elenco0 e neste coloquemos a lista dos principais atores do filme*
$ilme
2-tulo: :-;en Ori'ens: <olverine
=,nero: !ventura
>ura)o min&: ?@A
!no: B@@C
Elenco:
Du'+ JacEman 7o'an F <olverine&
1"an 1e"nolds <ade <ilson F >eadpool&
7iev Sc+reiber 6ictor Greed F >entes-de-sabre&
>ominic ;ona'+an 4radle"&
$ilme
2-tulo: 6eloHes I $uriosos J
=,nero: !)o
>ura)o min&: ?@A
!no: B@@C
Elenco:
6in >iesel >ominic />om0 2oretto&
Paul <alEer 4rian OKGonner&
Jordana 4reLster ;ia 2oretto&
;ic+elle 1odri'ueH 7ett"&
Para esta nova estrutura faHemos um arra" de ob(etos JSON para os filmes um para cada& e nos
itens /elenco0 um outro arra" simples de strin's nomes dos atores&
1
2
3
4
5
6
7
8
9
10
11
var filmes = ,
{
"titulo" : "X-Men Origens: ol!erine""
"genero" : "#!entura""
"$ura%ao" : "&0'""
"ano" : "200(""
"elen%o" : ,
"-ug. /a%0man 12ogan 3 ol!erine4""
"56an 5e6nol$s 1a$e ilson 3 7ea$pool4""
"2ie! S%.rei8er 19i%tor :ree$ 3 7entes-$e-sa8re4""
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
"7omini% Monag.an 1Bra$le64"
;
}"
{
"titulo" : "9elozes < =uriosos >""
"genero" : "#?@o""
"$ura%ao" : "&0'""
"ano" : "200(""
"elen%o" : ,
"9in 7iesel 17omini% \"7om\" Aoretto4""
"Baul al0er 1Brian O):onner4""
"/or$ana BreCster 1Mia Aoretto4""
"Mi%.elle 5o$riguez 12ett64"
;
}
;
6amos analisar a estrutura acima:
Linha 1 - "Abro" o array que conter os J!"#s $e ca$a %i&'e uti&i(an$o ")"
Linha 2 - "Abro" o J!" $o *ri'eiro %i&'e
Linha 3 - +rio o *ri'eiro atributo $o 'eu ob,eto J!" - "titu&o"
!bser-e que *ara atribuir u' -a&or a u' ite' usa-se "."
/ste atributo *o$er ser acessa$o &itera&'ente *e&o seu no'e
/01. %i&'es)021titu&o
A*esar $o atributo "titu&o" ter si$o $ec&ara$o co' o uso $e
as*as n3s consi4ui'os acessa-&o $ireta'ente se' e&as1
5sso ocorre *orque interna'ente 6 co'o se o ite' se tornasse
u'a -ari-e& 7ou u'a *ro*rie$a$e no conceito !!8 $o ob,eto
J!" que re*resenta o %i&'e a&oca$o no 9n$ice :/;! $o array
%i&'es
Linhas 4 a 6 - ;e*ito o 'es'o *roce$i'ento $a &inha 31
!bser-e que uti&i(a'os a "<" *ara se*arar os atributos $o
ob,eto J!"
Linha 7 - +rio o atributo "e&enco" e a e&e eu atribuo u' array conten$o
os atores $o %i&'e
Linha 13 - "=echo" o J!"
Linhas 14 a 25 - ;e*ito a 'es'a coisa *ara o *r30i'o ob,eto J!"1
Linha 26 - "=echo" o array $e ob,etos J!"
6amos ver a'ora como ler al'uns dos dados da nossa estrutura:
filmes; //retorna um arra" #onten$o $ois o%&etos 'SO(
filmes,0;; //retorna um o%&eto 'SO(
filmes,0;*tDtulo; //retorna ")-*en Ori+ens, -o./erine"
filmes,&;*elen%o,2;; //retorna "'or$ana Bre0ster 1*ia Toretto2"
Para iterar em cada um dos filmes do arra" utiliHamos um loop simples
1
2
3
4
5
6
7
for 1i=0; iEfilmes*lengt.; iFF4 {
filme = filmes,i;;
infos=ilme = ));
for1G in filme4{
atri8uto = G;
!alor = filme,G;;
infos=ilme F= atri8utoF):\t)F!alorF)\n);
8
9
10
}
alert1infos=ilme4;
}
!nalisando a estrutura acima:
Linha 1 - =a(en$o o %or *ara tratar ca$a u' $os %i&'es
+o'o "%i&'es" 6 u' array< a *ro*rie$a$e "&en4th" 'e $i(
quantos s>o os %i&'es conti$os no array
Linha 2 - Atribuo a -ari-e& "%i&'e" o %i&'e $o 9n$ice a*onta$o *e&o %or
Linha 3 - Li'*o a -ari-e& "in%os=i&'es" atribuin$o a e&a u'a strin4 -a(ia
Linha 4 - 5tero e' ca$a u' $os atributos $o %i&'e< &e'bran$o que os
atributos s>o. titu&o< 4?nero< $ura@>o< ano e e&enco
Linha 5 - Ae4o o no'e $o atributo ,
Linha 6 - Ae4o o -a&or $o atributo ,
Linha 7 - Bonto a strin4 "AC;5DEC!. FAL!;"
! (Muer" usa muito JSON para parametriHar suas funes* Neste linE eu mostro como
parametriHarmos nossas pr8prias funes JS usando JSON*
Para mais detal+es a cerca do JSON visite +ttp:FFLLL*(son*or'