JSON

Curs Javascript

Notatia JSON (JavaScript Object Notation) este un format simplu de date folosit pentru schimbul de informatii.
Desi contine un minim si simplu set de reguli pentru structurarea datelor in format text, JSON poate reprezenta o structura complexa de date, ce poate sa cuprinda matrici si obiecte, in format text. Datorita acestei capabilitati, formatul JSON a devenit din ce in ce mai folosit si preferat mai ales in tehnologia Ajax.

1. Sintaxa JSON

Sintaxa JSON are ca baza de structurare a datelor principiul de formare a matricelor (Array), si anume legatura cheie-valoare.
Iata exemplul unui Array simplu, rescris in format JSON:

Ex. 1 - Array secvential

<script type="text/javascript">
// Un Array secvential, cu 3 elemente
var arr1 = new Array();
  arr1[0] = 'val 1';
  arr1[1] = 'val 2';
  arr1[2] = 'val 3';

// Matricea de mai sus poate fi rescrisa cu notatia JSON astfel:
  var jsn1 = ['val 1', 'val 2', 'val 3'];

// Elementele din "jsn1" pot fi apelate la fel ca si in cazul unui Array
alert(jsn1[0]);
</script>

Regulile de sintaxa JSON

- JSON poate reprezenta urmatoarele tipuri de date: siruri, numere, boolean, null, matrice si obiecte.
- Daca datele corespund unui Array secvential (cheile numere consecutive, incepand cu 0), in format JSON se scriu valorile intre ghilimele, separate prin virgula si totul intr-o pereche de paranteze drepte [] (Aratat in "Ex. 1").
- Daca datele corespund unui Array asociativ, sau unui obiect, in notatia JSON:
          - continutul matricei, sau obiectului, va fi scris in cadrul unei perechi de acolade {}
          - grupele de elemente ale matricei, sau obiectului, se separa prin virgula (,)
          - cheile si valorie, sau proprietatile si valorile (in cazul obiectelor), se scriu intre ghilimele si separate prin caracterul doua puncte (:). Vedeti "Ex. 2" pt. Array asociativ si "Ex. 3" pt. obiect.
- Daca structura JSON contine mai multe matrici, obiecte sau si matrice si obiect imbricate; se scriu elementele fiecaruia grupate comform sintaxei, iar fiecare grupa se separa de urmatoarea prin virgula. Vedeti "Ex. 4", "Ex. 5" si "Ex. 6".

La ce foloseste JSON

O prima utilitate este faptul ca datele sunt retinute intr-o forma ce poate fi usor citita si recunoscuta atat de om cat si de masina.
O alta utilitate esentiala este faptul ca pot fi transmise in format text (intr-un singur sir) structuri de date complexe (matrici, obiecte) la alte aplicatii unde pot fi usor transformate in alt limbaj.
- De exemplu, elementele unui Array din JavaScript pot fi transmise cu Ajax, in format JSON, la un script PHP care poate usor sa parcurga acele date si sa le transforme intr-un Array in limbajul PHP, cu aceleasi legaturi cheie-valoare care erau initial in JavaScript. Sau invers, JavaScript poate primi, prin Ajax, de la PHP, structuri de date mai complexe pe care le poate rescrie si folosi in cod JavaScript.

2. Exemple cu structuri JSON

Iata cateva exemple cu mai multe tipuri de date rescrise in format JSON. Explicatiile sunt direct in cod.

Ex. 2 - Array asociativ

<script type="text/javascript">
// Un Array asociativ, cu 3 elemente
var site = new Array();
  site['url'] = 'https://marplo.net';
  site['curs'] = 'JavaScript';
  site['tutorial'] = 'JSON';

// Aceeasi matrice, scrisa in format JSON
var jsn2 = {"url":"https://marplo.net", "curs":"JavaScript", "tutorial":"JSON"};

// Elementele din "jsn2" pot fi apelate cel mai simplu astfel
alert(jsn2.tutorial);         // Sau:     jsn2['tutorial']
</script>

- Fereastra Alert cve va fi afisata o puteti vedea dand click pe: Ex. 2

Ex. 3 - Obiect

<script type="text/javascript">
// Obiect cu datele unei imagini
var DatePoza = new Object();
  DatePoza.width = 500;
  DatePoza.height = 400;
  DatePoza.alt = 'Titlu Poza';

// Obieectul "DatePoza" cu notatia JSON
var jsn3 = {"width" : 500, "height" : 400, "alt" : "Descriere Poza"};

// Proprietatile obiectului din "jsn3" pot fi apelate astfel (ex. "height")
alert(DatePoza.height);
</script>

- Click pe: Ex. 3 ca sa vedeti rezultatul.

Exemple mai complexe - Array si obiecte imbricate

Spatiile sau randurile noi sunt ignorate in sintaxa JSON, fapt ce permite o ordonare mai aerisita a elementelor, dupa cum se observa in urmatoarele exemple.

Ex. 4 - Matrici imbricate

<script type="text/javascript">
// Un Array secvential ce contine inca un Array la al doilea element
var preferinte = new Array();
  preferinte[0] = 'albastru';
      preferinte[1] = new Array();         // Elementul cu matricea imbricata (interna)
      preferinte[1]['bauturi'] = 'Apa';
      preferinte[1]['mancare'] = 'Fructe';

// Array-ul "preferinte" rescris cu JSON
var jsn4 = [
    "albastru",
    {"bauturi" : "Apa", "mancare" : "Fructe"}         // Elementele matricei interne
  ];         // Se incheie cadrul cu datele pt. "jsn4"

// Pentru a folosi o valoare din "jsn4", din matricea interna, se procedeaza astfel
alert(jsn4[1].mancare);         // Va afisa "Fructe"
</script>

Ex. 5 - Obiecte imbricate

<script type="text/javascript">
// Un obiect a carui a treia proprietate este un alt obiect
var DatePoza = new Object();
  DatePoza.width = 500;
  DatePoza.height = 400;
  DatePoza.Thumbail = new Object();         // Proprietatea cu obiectul intern
      DatePoza.Thumbail.url = 'dirimg/thumbail,jpg';
      DatePoza.Thumbail.width = 100;
      DatePoza.Thumbail.height = 100;

// Obiectul "DatePoza" rescris in format JSON
var jsn5 = {
    "width" : 500,
    "height" : 400,
    "Thumbail" : {         // Incep datele obiectului intern
        "url" : "dirimg/thumbail.jpg",
        "width" : 100,
        "height" : 100
    }         // Se termina obiectul intern
  };         // Se termina obiectul principal

// Apelarea unei proprietati din "jsn5", din obiectul interrn
alert(jsn5.Thumbail.url);         // Va afisa: "dirimg/thumbail.jpg"
</script>

Ex. 6 - Obiect cu Array imbricat

<script type="text/javascript">
// Obiect cu 3 proprietati, a doua fiind un Array secvential
var MPsite = new Object();
  MPsite.url = 'https://marplo.net';
  MPsite.cursuri = new Array();         // Proprietatea a carei valoare e un Array
      MPsite.cursuri[0] = 'Programare web';
      MPsite.cursuri[1] = 'Limbi straine';
  MPsite.tutoriale = 'JavaScript';

// Obiectul "MPsite" in format JSON
var jsn6 = {
    "url" : "https://marplo.net",
    "cursuri" : ["Programare web", "Limbi straine"],         // Elementele Array-ului secvential
    "tutoriale" : "JavaScript"
  };

// Apelarea unui element din "jsn6", din Array intern
alert(jsn6.cursuri[0]);         // Va afisa" "Programare web"
</script>

3. Combinare cod traditional cu JSON

O alta utilitate a formatului JSON este faptul ca in JavaScript poate fi combinat in structuura codului traditional, in obiecte, functii, Array; ceea ce poate micsora codul scris si in plus da si o ordine mai clara a datelor.
Iata un exemplu simplu ce demonstreaza acest lucru si din care se poate invata cum se combina limbajul standard cu notatia JSON. Se foloseste un obiect cu 2 proprietati si o metoda, valorile proprietatilor fiind un Array secvential, respectiv unul asociativ.

<script type="text/javascript">
// Obiect definit cu notatia standard, cu 2 proprietati si o metoda
// Valorile proprietatilor sunt cate un Array
var obj_normal = new Object();
  obj_normal.prop1 = new Array();         // Prima proprietate
      obj_normal.prop1[0] = 4;
      obj_normal.prop1[1] = 5;
      obj_normal.prop1[2] = 8;
  obj_normal.prop2 = new Array();         // A doua proprietate
      obj_normal.prop2['id1'] = 10;
      obj_normal.prop2['id2'] = 20;
  obj_normal.getProdus = function (nr, id) {         // Definirea Metodei
      // Calculeaza produsul numerelor preluate din proprietatile obiectului, dupa parametri primiti
      var re_produs = this.prop1[nr] * this.prop2[id];
      return re_produs;
    }

// Varianta obiectului "obj_normal" in combinatie cu JSON
var obj_jsn = new Object();
    obj_jsn.prop1 = [4, 5, 8];         // Prima proprietate (cu notatia JSON)
    obj_jsn.prop2 = {"id1" : 10, "id2" : 20};         // A doua proprietate (cu notatia JSON)
    obj_jsn.getProdus = function (nr, id) {         // Definirea Metodei
        // Calculeaza produsul numerelor preluate din proprietatile obiectului, dupa parametri primiti
        var re_produs = this.prop1[nr] * this.prop2[id];
        return re_produs;
      }

// Pentru a demonstra ca rezultatul nu e afectat
// Se apeleaza metoda "getProdus()" cu aceiasi parametri pentru ambele variante ale obiectului si se compara intr-un Alert
var test1 = obj_normal.getProdus(1, 'id2');
var test2 = obj_jsn.getProdus(1, 'id2');
alert(test1+ ' = '+ test2);         // Va afisa" "100 = 100"
</script>

- Se observa diferenta de marime a codului dintre prima forma a obiectului scrisa in cod standard (in "obj_normal") si cea combinata cu JSON (in "obj_jsn"), in plus, a doua varianta are o ordine mai simpla, si dupa cum trebuie, rezultatul e acelasi.
- Puteti vedea fereastra Alert afisata de acest script, dand click pe: Ex. 7

4. JSON.parse()

Codul din cadrul unui sir ce contine o structura de date in format JSON poate fi in siguranta compilat si transformat in obiect functional in JavaScript cu JSON.parse().
- La ce ar folosi aceasta?
Acest lucru este destul de util cand datele sunt primite in JavaScript de la alta aplicatie, in general sub forma unui sir text. De exemplu, de pe server de la PHP, prin Ajax. Sirul primit, in format JSON, poate contine structura unui Array sau obiect, iar cu "JSON.parse()" poate fi inclusa in scriptul JS ca si cum a fost definita in el.
Iata un exemplu care prezinta si explica mai bine acest lucru (Explicatiile necesare sunt in cod).

<script type="text/javascript">
// O variabila a carei valoare e un sir ce contine, in notatia JSON, structura unui obiect
// Obiectul are o proprietate "prop" cu valoarea 8, si o metoda "metod" ce va returna valoarea lui "prop" inmultita cu un parametru primit (nr)
var jsn_sir = "{'prop':8, 'metod':function(nr){return this.prop*nr}}";

// Cu "JSON.parse()" se transforma sirul JSON in obiectul stocat in el
var jsn_obj = JSON.parse(jsn_sir);

// Acum exista obiectul "jsn_obj" cu proprietatea "prop" si metoda "metod" din sir, ca si cum au fost definite direct in script
// Se testeaza, apeland metoda "metod()" care ar trebui sa fie in obiectul "jsn_obj", creat cu "JSON.parse()"
alert(jsn_obj.metod(2));         // Va afisa: 16
</script>

- Rezultatul poate fi vazut daca testati singuri acest script, sau dati click pe: Ex. 8
- Astfel, pot fi create pe server si transferate cu Ajax la JavaScript siruri text in format JSON care sa contina matrici sau obiecte personalizate, ce pot fi apoi introduse in script-ul JS, cu "JSON.parse()", si folosite ca si cum au fost definite in acel script.

4. JSON.stringify()

• Pentru a transforma un array sau obiect JavaScript in sir care sa poata fi usor transferat la alta aplicatie, se aplica metoda: JSON.stringify().
Exemplu:

<script>
//obiect cu un array in el
var js_ob ={prop1:'val 1', prop2:789, arr:['v1', 'v2', 34]};

//transforma datele din js_ob intr-un sir
var js_sr = JSON.stringify(js_ob);

//Test
alert(js_sr); // {"prop1":"val 1","prop2":789,"arr":["v1","v2",34]}
</script>

<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://www.marplo.net/html/</li>
</ul>

.some_class {
  display: list-item;
}

var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}

$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net

I`m living here.
- Traiesc /Locuiesc aici.

Estoy viviendo aquí.
- Traiesc /Locuiesc aici.