Cum să lucrați cu JSON în JavaScript

Introducere

deoarece JSON este derivat din limbajul de programare JavaScript, este o alegere naturală de utilizat ca format de date în JavaScript. JSON, prescurtarea de la JavaScript Object Notation, este de obicei pronunțată ca numele „Jason.”

pentru a afla mai multe despre JSON în termeni generali, citiți tutorialul” o introducere în JSON”.

pentru a începe să vă gândiți unde puteți utiliza JSON în programele JavaScript, unele cazuri generale de utilizare a JSON includ:

• stocarea datelor
• generarea structurilor de date de la intrarea utilizatorului
• transferul datelor de la server la client, client la server și server la server
• configurarea și verificarea datelor

acest tutorial vă va oferi o introducere în lucrul cu JSON în JavaScript. Pentru a profita la maximum de această introducere, ar trebui să vă familiarizați cu limbajul de programare JavaScript.

formatul JSON

formatul JSON este derivat din sintaxa obiectului JavaScript, dar este în întregime bazat pe text. Este un format de date cheie-valoare, care este de obicei redat în acolade buclat.

când lucrați cu JSON, veți vedea probabil obiecte JSON într-un fișier.json, dar ele pot exista și ca obiect sau șir JSON în contextul unui program. Citiți mai multe despre sintaxă și structură aici.

când lucrați cu un fișier.json, acesta va arăta astfel:

{ "first_name" : "Sammy", "last_name" : "Shark", "online" : true }

dacă, în schimb, aveți un obiect JSON într-un .js sau .html, veți vedea probabil că este setat la o variabilă:

var sammy = { "first_name" : "Sammy", "last_name" : "Shark", "online" : true }

în plus, este posibil să vedeți JSON ca un șir, mai degrabă decât un obiect în contextul unui fișier de program JavaScript sau script. În acest caz, puteți vedea totul pe o singură linie:

var sammy = '{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}';

conversia obiectelor JSON în șiruri poate fi deosebit de utilă pentru transportul rapid al datelor.

am trecut peste formatul general al JSON și cum vă puteți aștepta să-l vedeți ca un fișier.json sau în JavaScript ca obiect sau șir.

comparație cu obiectul JavaScript

merită să rețineți că JSON a fost dezvoltat pentru a fi utilizat de orice limbaj de programare, în timp ce obiectele JavaScript pot fi lucrate doar direct prin limbajul de programare JavaScript.

în termeni de sintaxă, obiectele JavaScript sunt similare cu JSON, dar cheile din obiectele JavaScript nu sunt șiruri între ghilimele. De asemenea, obiectele JavaScript sunt mai puțin limitate în ceea ce privește tipurile transmise valorilor, astfel încât pot utiliza funcțiile ca valori.

să ne uităm la un exemplu de obiect JavaScript al utilizatorului site-ului web Sammy Shark care este în prezent online.

var user = { first_name: "Sammy", last_name : "Shark", online : true, full_name : function() { return this.first_name + " " + this.last_name; }};

Acest lucru vă va părea foarte familiar ca obiect JSON, dar nu există ghilimele în jurul niciunei chei (first_namelast_nameonline sau full_name) și există o valoare a funcției în ultima linie.

dacă dorim să accesăm datele din obiectul JavaScript de mai sus, am putea folosi notația dot pentru a apelauser.first_name; și pentru a obține un șir, dar dacă dorim să accesăm numele complet, ar trebui să facem acest lucru apelânduser.full_name(); pentru că este o funcție.

obiectele JavaScript pot exista doar în limba JavaScript, așa că atunci când lucrați cu date care trebuie accesate de diferite limbi, cel mai bine este să optați pentru JSON.

accesarea datelor JSON

datele JSON sunt accesate în mod normal în Javascript prin notație dot. Pentru a înțelege cum funcționează, să luăm în considerare obiectul JSON sammy:

var sammy = { "first_name" : "Sammy", "last_name" : "Shark", "online" : true }

pentru a accesa oricare dintre valori, vom folosi notația dot care arată astfel:

sammy.first_namesammy.last_namesammy.online

variabila sammy este primul, urmat de un punct, urmat de cheia care trebuie accesată.

pentru a crea o alertă JavaScript care ne arată valoarea asociată cu cheia first_name într-o fereastră pop-up, putem face acest lucru apelând funcția JavaScript alert() :

alert(sammy.first_name);

Output
Sammy

aici, am apelat cu succes valoarea asociată cu first_name cheie din sammy obiect JSON.

putem folosi, de asemenea, sintaxa paranteză pătrată pentru a accesa datele de la JSON. Pentru a face acest lucru, am păstra cheia în ghilimele duble între paranteze pătrate. Pentru sammy variabila de mai sus, folosind sintaxa paranteză pătrată într-un alert() funcția arată astfel:

alert(sammy);

Output
true

când lucrați cu elemente matrice imbricate, ar trebui să apelați numărul elementului din matrice. Să luăm în considerare JSON de mai jos:

var user_profile = { "username" : "SammyShark", "social_media" : }

pentru a accesa șirul facebook, putem apela acel element din matrice în contextul notației dot:

alert(user_profile.social_media.description);

Output
facebook

observați că pentru fiecare element imbricat vom folosi un punct suplimentar.

folosind notația dot sau sintaxa paranteză pătrată ne permite să accesăm datele conținute în format JSON.

funcții pentru lucrul cu JSON

această secțiune va analiza două metode de stringificare și parsare a JSON. Posibilitatea de a converti JSON de la obiect la șir și invers este utilă pentru transferul și stocarea datelor.

JSON.stringify ()

JSON.stringify() funcția convertește un obiect într-un șir JSON.

șirurile sunt utile pentru transportul datelor de la un client la un server prin stocarea sau transmiterea informațiilor într-un mod ușor. De exemplu, puteți aduna setările unui utilizator pe partea de client și apoi le trimite la un server. Mai târziu, puteți citi informațiile cu metoda JSON.parse() și puteți lucra cu datele după cum este necesar.

vom analiza un obiect JSON pe care îl atribuim variabileiobj și apoi îl vom converti folosindJSON.stringify() trecândobj la funcție. Putem atribui acest șir variabilei s:

var obj = {"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}var s = JSON.stringify(obj)

acum, dacă lucrăm cu s, vom avea JSON disponibil pentru noi ca un șir, mai degrabă decât un obiect.

'{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}'

funcțiaJSON.stringify() ne permite să convertim obiecte în șiruri de caractere. Pentru a face contrariul, vom analiza funcția JSON.parse().

JSON.parse ()

șirurile sunt utile pentru transport, dar veți dori să le puteți converti înapoi la un obiect JSON din partea clientului și / sau a serverului. În timp ce puteți converti textul într-un obiect cu funcția eval(), nu este foarte sigur, așa că vom folosi funcția JSON.parse().

pentru a converti exemplul în JSON.stringify() secțiunea de mai sus, ne-ar trece șirul s la funcția, și atribuiți-l la o nouă variabilă:

var o = JSON.parse(s)

apoi, ne-ar avea obiectul o pentru a lucra cu, care ar fi identic cu obiectul obj.

pentru a arunca o privire mai profundă, să luăm în considerare un exemplu de JSON.parse() în contextul unui fișier HTML:

<!DOCTYPE html><html><body><p></p><script>var s = '{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}';var obj = JSON.parse(s);document.getElementById("user").innerHTML ="Name: " + obj.first_name + " " + obj.last_name + "<br>" +"Location: " + obj.location;</script></body></html>

Output
Name: Sammy SharkLocation: Ocean

În contextul unui fișier HTML, putem vedea cum șirul JSON s este convertit într-un obiect care poate fi recuperat la redarea finală a paginii accesând JSON prin notația dot.

JSON.parse() este o funcție sigură pentru a analiza șirurile JSON și a le converti în obiecte.

concluzie

JSON este un format natural de utilizat în JavaScript și are multe implementări disponibile pentru utilizare în multe limbaje de programare populare. Dacă doriți să utilizați formatul într-o altă limbă de progamare, puteți vedea suportul lingvistic complet pe site-ul „introducerea JSON”.

deoarece este ușor și este ușor transferat între limbaje de programare și sisteme, JSON a experimentat un sprijin sporit în API-uri, inclusiv API-ul Twitter.