Vodič o radu s JSON-om u JavaScriptu

Uvod

Postoji mnogo načina na koje se JSON može koristiti u JavaScript. Jedna od njegovih najosnovnijih primjena je pohranjivanje podataka. Također ga možete koristiti za prijenos podataka između klijenata, između poslužitelja ili s poslužitelja na klijent. Druge korisne primjene uključuju mogućnost konfiguriranja i provjere podataka, kao i generiranje struktura podataka.

U ovom vodiču ćemo istražiti kako možete koristiti JSON u svojim JavaScript programima. Ako imate prethodnog iskustva u programiranju s JavaScriptom, ovo bi vam trebalo biti jednostavno.

Što je JSON?

JSON je kratica za JavaScript Object Notation. To je format dizajniran kako bi omogućio dijeljenje različitih vrsta podataka. JSON uglavnom koristi JavaScript kao svoj primarni programski jezik. Također radi i s drugim jezicima kao što su Python, PHP, Ruby, kao i Java. Jednostavan je za čitanje, iznimno lagan i ne zahtijeva puno formatiranja. Možete se upoznati s općom sintaksom i strukturom formata prateći naš vodič: Pregled JSON formata za dijeljenje podataka.

JSON se može koristiti samostalno ili definirati u drugom formatu datoteke. Kada je samostalan, koristi .json proširenje. Kada je u drugom formatu, pojavljuje se ili kao JSON niz unutar navodnika ili kao objekt dodijeljen varijabli. Na primjer, JSON se može koristiti i u .html formatu. Ovaj format omogućuje vam relativno jednostavan prijenos podataka između poslužitelja i preglednika.

JSON format temelji se na tekstu. Podaci ključ-vrijednost pojavljuju se u vitičastim zagradama. Evo kako izgleda tipična datoteka .json izgleda:

Ako imate JSON objekt u .js ili .html datoteci, pojavit će se kao varijabla ovako:

U nekim slučajevima možete ih vidjeti sve u jednom retku. To je kada se JSON prikazuje kao niz znakova umjesto kao objekt u JavaScript datoteci:

Možete pretvoriti JSON objekte u nizove znakova. To je korisno kada želite izvršiti brzi prijenos podataka.

JSON naspram JavaScript objekta

Kao što smo već spomenuli, JSON radi s bilo kojim programskim jezikom. Međutim, s JavaScript objektima možete raditi samo pomoću JavaScripta. Sintaksa u JSON-u i JavaScriptu je slična. Razlika je u tome što se kod JavaScript objekata ključevi pojavljuju bez navodnika. Osim toga, JavaScript objekti mogu koristiti funkcije kao vrijednosti, što znači da su manje ograničeni.

U sljedećem primjeru prikazujemo JavaScript opciju korisnika. Korisnik je Sammy Shark i trenutno je na mreži:

Kao što vidite, nema navodnika oko ključeva kao što su first_name, last_name, online, ili full_name. Također, u zadnjem retku nalazi se vrijednost funkcije. Ako želite pristupiti podacima u obliku niza znakova, možete pozvati user.first_name koristeći točkastu notaciju. Ako umjesto toga želite puno ime, koristit ćete user.full_name(), budući da je to funkcija.

Kako pristupiti JSON podacima

Kao što smo spomenuli u prošlom odjeljku, JSON podacima u JavaScriptu možete pristupiti pomoću točkaste notacije. Uzmimo za primjer JSON objekt pod nazivom sammy:

Naša točkasta notacija za pristup vrijednostima bit će:

Prvo dolazi varijabla. Nakon toga stavljamo točku. Na kraju navodimo ključ kojem želimo pristupiti.

Recimo da želimo napraviti upozorenje u JavaScriptu koje prikazuje vrijednost ključa first_name. Kako bi se pojavio u skočnom prozoru, koristit ćemo JavaScript funkciju alert() ovako:

Drugi način pristupa podacima iz JSON-a je korištenje sintakse uglatih zagrada. Ključ treba staviti pod dvostruke navodnike unutar uglatih zagrada. Evo nastavka prethodnog primjera:

Što ako radite s ugniježđenim elementima niza? U tom slučaju morate pozvati broj stavke u nizu. Uzmite sljedeći primjer:

Recimo da želimo pristupiti nizu znakova facebook. Evo kako ćemo upotrijebiti točkastu notaciju za pristup toj stavci u nizu pomoću njezinog broja:

Ne zaboravite dodati dodatnu točku za svaki ugniježđeni element.

Funkcije koje se koriste s JSON-om

Zatim ćemo pogledati nekoliko funkcija koje možete koristiti s JSON-om. Prijenos i pohrana podataka postaju prilično jednostavni kada možete pretvoriti JSON iz objekta u niz znakova ili iz niza znakova u objekt. Istražit ćemo kako možete pretvoriti JSON u niz znakova (stringify) i analizirati ga (parse) na dva različita načina:

• JSON.stringify()

Nizove znakova bolje je koristiti kada pokušavate prenijeti podatke na lagan način. Zato se koristi za pohranu i prijenos podataka s klijenta na poslužitelj. Razmotrite sljedeći primjer. Recimo da prikupljate podatke o korisničkim postavkama na jednom računalu. Morate poslati ove informacije na svoj poslužitelj. Za tu svrhu upotrijebili biste niz znakova. Zatim ih možete pretvoriti natrag pomoću JSON.parse() kako biste ih čitali i radili s njima.

Funkcija koju ćemo ovdje istaknuti je JSON.stringify(). Ova funkcija pretvara JSON objekt u JSON niz znakova. U ovom primjeru dodijelit ćemo naš objekt varijabli obj. Pretvorit ćemo ga pomoću funkcije JSON.stringify(). Da bismo to učinili, proslijedit ćemo obj funkciji i zatim dodijeliti niz znakova varijabli s ovako:

Pozivanje varijable s dat će vam JSON kao niz znakova:

• JSON.parse()

Razumljivo, JSON.parse() ima suprotnu funkciju. Nakon što završite s prijenosom podataka, morate ih pretvoriti natrag u JSON objekt kako biste mogli raditi s njima. Jedna je mogućnost korištenje funkcije eval(). Međutim, ovaj pristup nije previše siguran. Zato radije koristimo funkciju JSON.parse() .

Razmotrite još jednom prethodni primjer. Proslijedit ćemo niz znakova s funkciji JSON.parse(). Zatim ćemo joj dodijeliti novu varijablu:

Naš novi objekt sada je o. Bit će isti kao obj. Više uvida dobivamo kada razmotrimo JSON.parse() u HTML datoteci poput ove:

Ovdje zapravo možete vidjeti kako smo pretvorili string s u objekt koji se može dohvatiti. Stoga je JSON.parse() sigurna opcija za pretvaranje JSON stringova u objekte.

Zaključak

Kao što smo vidjeli u ovom vodiču, JSON ima mnogo primjena u JavaScriptu. Posebno je koristan jer se može koristiti s gotovo bilo kojim programskim jezikom, što ga čini prirodnim izborom. Povrh toga, tek smo zagrebali po površini. Postoji još mnogo toga što možete učiniti s JSON-om. Već je podržan u API-jima.

Evo dodatnih resursa s našeg bloga koji će vam pomoći u programiranju s JavaScriptom:

• Saznajte kako prototipovi i nasljeđivanje funkcioniraju u JavaScriptu.
• Detaljno istražite kako dodati JavaScript u HTML.
• Ako gradite vlastitu web aplikaciju, pogledajte naš vodič o tome kako odabrati najbolju konfiguraciju poslužitelja.

Sretno programiranje!