www.w3.org/

Skraćenica od JavaScript Object Notation

Predstavlja tekstualni zapis

Vrlo logi an i razumljiv za oveka

Predstavlja deo Java Script-a i može biti parsiran od strane Java Script parser-a

Koristi se kao format za razmenu informacija

između korisnika i servera

JSON predstavlja vrlo pogodan format da se

koristi kao „interface“ ili na in kako se podaci od klijenta prosleđuju serveru i obratno

Bilo koji JavaScript objekat može se lako konvertovati JSON i kao takav AJAX-om proslediti

serveru. Server takođe „razume“ JSON. Odgovor servera se takođe lako konvertuje u

JSON i AJAX-om vraća korisniku, i ko takav lako se konvertuje u JavaScript objekat, i postaje

sastavni deo korisni kog dela koda.

-

-

JavaScript objekat

-

-

-

-

Klijent Web server

JSON

JSON JSON JSON

JSON

JSON JSON

JSON

konverzija

Nezavistan je od konkretnog jezika, pa ga

„razumeju“ i klijentski i serverski jezici Lak za parsiranje

Tekstualno orijentisan

2002. pojavljuje se JSON.org a 2005. AJAX

Prednost mu daje mogućnost da predstavi neki od uobi ajenih struktura podataka: records, lists

i trees.

Nije markup language!

Podaci u JSON-u su naj ešće predstavljeni kombinacijom name:value

Podaci su razdvojeni sa ,

{ } sadrže objekte

[ ] sadrže nizove

Name je naj ešće string koji ukazuje na index asocijativnog niza

Value može biti: Strings, Numbers, Booleans, Objects, Arrays i null

Value NE može biti: function, date, undefined

Kombinacija name-value je odvojena sa { }

Između name i value su : Kombijacija name:value se odvaja sa ,

String se piše pod znacima navoda a broj ne! Primer { "ime": "Pera", "godiste": 1980 }

U slu aju niza ima se uređena kolekcija vrednosti U tom slu aju vrednosti su grupisane sa [], a

međusobno razdvojene sa , Primer [ "Pera", "Mika", "Zika" ]

Naj ešće je niz skup više name:value parova, kao što je klasi an niz skup više podataka

Primer (dodatno pogledati slajd 11 – Odgovor servera)

[ { "ime":"Pera" , "prezime":"Peric" }, { "ime ":"Mika" , "prezime":"Mikic" }, { "ime ":"Zika" , "prezime":"Zikic" } ]

Niz je esto value vrednost u paru name:value

{ "studenti": [ { "ime":"Pera" , "prezime":"Peric" }, { "ime ":"Mika" , "prezime":"Mikic" }, { "ime ":"Zika" , "prezime":"Zikic" } ]

}

Ne treba mešati više podataka grupisanih u niz od više „prostih“ podataka:

"address": {

"streetAddress": "21 2nd Street",

"city": "New York",

"state": "NY",

"postalCode": "10021"

}

{

"firstName": "John",

"lastName": "Smith",

"age": 25,

"address":

{

"streetAddress": "21 2nd Street",

"city": "New York",

"state": "NY",

"postalCode": "10021"

},

"phoneNumber": [

{

"type": "home",

"number": "212 555-1234"

},

{

"type": "fax",

"number": "646 555-4567"

}

]

}

Kada se odgovor baze podataka direktno konvertuje u JSON file, pomoću PHP-a, dobija se format JSON fajla kao u primeru.

U ovom slu aju imena kolona u tabeli baze podataka su: idProizvoda, imeProizvoda, cenaProizvoda, putanjaSlika.

[ {"idProizvoda":"1","imeProizvoda":"KFD Kabl za tablete 2.5 x 0.7 mm","cenaProizvoda":"290","putanjaSlika":"slike\/1.png"},

{"idProizvoda":"2","imeProizvoda":"ANNEX Torba za Tablet 10.1\"","cenaProizvoda":"445","putanjaSlika":"slike\/2.png"},

{"idProizvoda":"3","imeProizvoda":"ANEEX 4-Ports USB Hub - E-B606","cenaProizvoda":"490","putanjaSlika":"slike\/3.jpg"}

]

Naj ešće se nudi kao alternativa XML-u

Sli nosti:

Oba su bliska itanju i tuma enju oveka Oba imaju vrlo prostu sintaksu Oba su hijerarhijski organizovana Oba su nezavisna od jezika Oba se mogu koristiti za AJAX

Razlike: Sintaksa je razli ita JSON je manje opisan JSON može biti parsiran sa JavaScript eval metodom JSON podržava nizove Name u JSON-u ne sme biti JavaScript rezervisana re XML može biti proverljiv (validated)

<?xml version='1.0' encoding='UTF-8'?>

<card>

<fullname>Sean Kelly</fullname>

<org>SK Consulting</org>

<emailaddrs>

<address type='work'>kelly@seankelly.biz</address>

<address type='home' pref='1'>kelly@seankelly.tv</address>

</emailaddrs>

<telephones>

<tel type='work' pref='1'>+1 214 555 1212</tel>

<tel type='fax'>+1 214 555 1213</tel>

<tel type='mobile'>+1 214 555 1214</tel>

</telephones>

<addresses>

<address type='work' format='us'>1234 Main StSpringfield</address>

<address type='home' format='us'>5678 Main StSpringfield</address>

</addresses>

<urls>

<address type='work'>http://seankelly.biz/</address>

<address type='home'>http://seankelly.tv/</address>

</urls>

</card>

{

"fullname": "Sean Kelly",

"org": "SK Consulting",

"emailaddrs": [

{"type": "work", "value": "kelly@seankelly.biz"},

{"type": "home", "pref": 1, "value": "kelly@seankelly.tv"}

],

"telephones": [

{"type": "work", "pref": 1, "value": "+1 214 555 1212"},

{"type": "fax", "value": "+1 214 555 1213"},

{"type": "mobile", "value": "+1 214 555 1214"}

],

"addresses": [

{"type": "work", "format": "us", "value": "1234 Main StnSpringfield"},

{"type": "home", "format": "us","value": "5678 Main StnSpringfield"}

],

"urls": [

{"type": "work", "value": "http://seankelly.biz/"},

{"type": "home", "value": "http://seankelly.tv/"}

]

}

www.w3.org/

<html>

<head>

</head>

<body>

<script type="text/javascript">

student = { "ime":"Petar", "prezime":"Petrovic", "godine":19 };

console.log(student);

</script>

</body>

</html>

itanje vrednosti iz objekta je moguće pomoću:

. notacije i pomoću [ ] notacije

<script type="text/javascript">

student = { "ime":"Petar", "prezime":"Petrovic", "godine":19 };

console.log(student);

var imeStudenta = student.ime;

console.log(imeStudenta);

var prezimeStudenta = student[“prezime”]; console.log(prezimeStudenta);

</script>

Dohvatanje svih name-ova je najlakše for-in

petljom gde se u svakoj iteraciji petlje u

promenljivoj npr. svojstvo dohvata jedan po jedan

name iz objekta

<script type="text/javascript">

student = { "ime":"Petar", "prezime":"Petrovic", "godine":19 };

for (svojstvo in student) {

console.log(svojstvo);

}

</script>

Kako se automatski može dohvatiti name, onda se dalje na bazi njega može automatki dohvatiti

svaki value

<script type="text/javascript">

student = { "ime":"Petar", "prezime":"Petrovic", "godine":19 };

for (svojstvo in student) {

var name = svojstvo;

var value = student[svojstvo];

console.log("name je: " + name + " a value je: " + value);}

</script>

Već je pomenuto da value može biti novi JSON objekat, pa se tada ta struktura zove ugnjeđdeni JSON

Bez obzira na stepen ugnježdenosti pravilo pristupa nekom value

je da se dođe do njegovog name, po ev od „vrha“ JSON-a pa

polako po dubini

student = { "ime":"Petar", "prezime":"Petrovic", "godine":19, "predmeti": {

"Matematika":"8",

"Engleski":"9",

"Programiranje":"7"}

};

var ocenaMat = student.predmeti.Matematika;

var ocenaEng= student.predmeti["Engleski"];

console.log(ocenaMat);

console.log(ocenaEng);

Sve do sada opisane aktivnosti su se odnosile na itanje name ii value vrednosti nekog JSON

objekta

Na isti na in kako je vršena selekcija name ili value da bi se pro itao, vrši se i selekcija za njegovu izmenu

Pravilo je isto kao i u klasi nom programiranju u smislu dodele vrednosti

x = y, dodeljuje vrednost y promenljivoj x

imeStudenta = student.ime; //value vrednost student.ime dodeljuje promenljivoj imeStudenta

student.ime = " Milan"; // vrednost Milan dodeljuje value vrednosti student.ime

student = { "ime":"Petar", "prezime":"Petrovic", "godine":19, "predmeti": {

"Matematika":"8",

"Engleski":"9",

"Programiranje":"7"}

};

student.ime = "Milan";

student.predmeti.Matematika = "10";

var ime = student.ime;

var ocenaMat= student.predmeti.Matematika;

console.log(ime);

console.log(ocenaMat);

student = { "ime":"Petar", "prezime":"Petrovic",

"godine":19, "predmeti": {

"Matematika":"8",

"Engleski":"9",

"Programiranje":"7"}

};

console.log(student.predmeti.Matematika);

delete student.predmeti.Matematika;

console.log(student.predmeti.Matematika);

student = {

"ime":"Petar",

"prezime":"Petrovic",

"godine":19,

"predmeti": [

{"naziv":"Matematika", "ocena":"8", "rok":"Januar"},

{"naziv":"Engleski", "ocena":"9", "rok":"Jun"},

{"naziv":"Programiranje", "ocena":"7", "rok":"Septembar"}

] };

for (zapis in student.predmeti) {

var jedanZapis= student.predmeti[zapis];

console.log(jedanZapis);

for (svojstvaPredmeta in jedanZapis) {

console.log("name je: " + svojstvaPredmeta + " a vrednost je: " + jedanZapis[svojstvaPredmeta] );

}

}

www.w3.org/

Već je naglašeno da je JSON vrlo pogodan za razmenu podataka se web severom

U toku rada sa JSON-om na strani klijenta on se ponaša kao JavaScript objekat i kao takav se ne može slati serveru

Slanje zahteva da to bude text

Zato je potrebno JavaScript objekat, koji ima strukturu JSON-a neposredno pre slanja konvertovati u text

Konverzija treba da zadrži svu sintaksu JSON-a da bi kasnije server mogao ispravno da je razume

Za te potrebe koristi se funkcija JSON.stringify()

student = {

"ime":"Petar",

"prezime":"Petrovic",

"godine":19,

"predmeti": [

{"naziv":"Matematika", "ocena":"8", "rok":"Januar"},

{"naziv":"Engleski", "ocena":"9", "rok":"Jun"},

{"naziv":"Programiranje", "ocena":"7", "rok":"Septembar"}

]

};

var konverzijaUString = JSON.stringify(student);

console.log(student);

console.log(konverzijaUString);

-

-

JavaScript

-

-

-

-

Klijent Web server

JSON

TEXT

TEXT TEXT

TEXT

TEXT TEXT

TEXT

TEXT

JSON.stringify()

JSON konverzija

JSON.parse()

Dobijanjem text formata, od server, potrebno je na

klijentu izvršiti konverziju u JSON format tj. JavaScript

objekat

To se realizuje funkcijom JSON.parse()

Ova funkcija iz teksta koji ima sintaksu JSON fajla

kreira JavaScript objekat

var x = '{ "ime":"Petar", "prezime":"Petrovic", "godine":19}';

var konverzijaUObjekat = JSON.parse(x);

console.log(x);

console.log(konverzijaUObjekat);

JSON podaci u JavaScript object-u se mogu realizovati

i pomoću funkcije eval:

Iz teksta u objekat:

var myObject = eval('(' + myJSONtext + ')');

var myObject = JSON.parse(myJSONtext);

Iz objekta u tekst:

var myJSONText = JSON.stringify(myObject);

www.w3.org/