Dziś mała odskocznia od projektów. Dla odmiany poruszę temat łatwy i przyjemny, ale ważny – JSON. Obecnie jest to chyba jeden z najpopularniejszych formatów wymiany danych w środowisku internetowym. Jest lekki, czytelny i prosty w obsłudze, szczególnie dla JavaScriptowców. Dlatego warto wiedzieć czym jest, jak wygląda i przede wszystkim jak go używać.
W tym poście omówię JSON dla początkujących.
Co to JSON?
W uproszczeniu, JSON to sposób na przechowywanie i przekazywanie danych za pomocą zwykłego tekstu. Tak, JSON to nic więcej niż łańcuch znaków. Ma on oczywiście pewne zasady, składnię. Na szczęście nie powinna ona sprawić nam problemów. Oto Przykład poprawnie napisanego JSONa:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
{ "dogs": [{ "id": 0, "name": "maja", "race": "pies" }, { "id": 1, "name": "milus", "race": "pies" }], "cats": [{ "id": 0, "name": "puszek", "race": "kot" }, { "id": 1, "name": "greebo", "race": "kot" }] } |
Wygląda znajomo? Nic dziwnego, ponieważ JSON korzysta ze składni JavaScriptu. JSON to skrót od JavaScript Object Notation. Czyli JavaScriptowy zapis obiektowy… no dobra, po polsku nie brzmi to przekonująco…, będę trzymał się JSON 😉
Wracając do powyższego przykładu, jest to po prostu zwykły, nienazwany JavaScriptowy obiekt. Warto zwrócić uwagę na jedną rzecz. Aby JSON był poprawny, klucze wartości muszą być łańcuchami znaków otoczonymi podwójnym cudzysłowiem. Pojedynczy cudzysłów w tym wypadku nie zadziała! Kolejną rzeczą, na którą warto uważać, jest dodawanie przecinka po ostatnim obiekcie. W JSie, taki zapis by przeszedł, w JSONie musimy tego unikać.
Najlepszym sposobem na upewnienie się, czy napisany przez Ciebie JSON jest ok, będzie sprawdzenie go w walidatorze. Polecam JSONlint. Należy wkleić kod na stronie, kliknąć “validate” i jeżeli coś z kodem jest nie tak, otrzymamy odpowiedni komunikat.
Do czego używamy JSON
JSON, podobnie jak inne struktury służące do przechowywania danych takich jak np. XML, ma szerokie zastosowanie.
Najczęściej jednak jest wykorzystywany do przekazywania i odbierania danych z serwera przez aplikacje na stronie internetowej. Na przykład kiedy użytkownik loguje się na do swojego konta w grze przeglądarkowej. Poprzez AJAX przeglądarka wysyła do serwera ID i hasło użytkownika. Skrypt po stronie serwera, napisany na przykład w PHP, sprawdza czy hasło jest poprawne. Jeżeli tak jest, w odpowiedzi skrypt wysyła do przeglądarki w formie JSON wszystkie dane użytkownika. Na podstawie tak otrzymanych danych, w przeglądarce wyświetlane są wszystkie informacje na temat konta użytkownika.
Jak skrypt w PHP może przygotować kod odczytywany przez JavaScript? Wcale nie musi, jedyne co oddaje to łańcuch znaków, który w przeglądarce jest zamieniany na obiekt JavaScriptowy. I tak powoli dochodzę do sedna dzisiejszego wpisu, czyli jak zamieniać JSONowe łańcuchy znaków na obiekty JavaScript i jak zamieniać obiekty JavaScript na JSONowe łańcuchy znaków.
JSON.parse() oraz JSON.stringify()
Jako przykład wykorzystam konto gracza, w grze przeglądarkowej. Załóżmy, że mamy obiekt JSON, zawierający wszystkie potrzebne dane. Oto struktura:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
{ "name":["Jan","Kowalski"], "email" : "jan@Kowalski.pl", "settings" : { "sound" : "off", "fullScreen": true, "newsDisplayed" : 5 }, "Characters" :[{"Conen":{ "level":10, "items":["topor"], "hungry": true } },{ "Druzzt":{ "level":4, "items":["sejmitar","sejmitar"], "hungry": true } },{ "Garelt":{ "level":10, "items":["miecz","miecz"], "hungry": true } }] } |
Zacznę od zamieniania łańcucha znaków JSON na obiekt JavaScriptowy. Zamiast obiektu, dostajemy taki łańcuch znaków:
1 |
'{"name":["Jan","Kowalski"],"email":"jan@Kowalski.pl","settings":{"sound":"off","fullScreen":true,"newsDisplayed":5},"Characters":[{"Conen":{"level":10,"items":["topor"],"hungry":true}},{"Druzzt":{"level":4,"items":["sejmitar","sejmitar"],"hungry":true}},{"Garelt":{"level":10,"items":["miecz","miecz"],"hungry":true}}]}' |
Jak to ugryźć? Na szczęście nie muszę tworzyć funkcji dzielących łańcuch na czynniki pierwsze (chociaż warto wiedzieć jak to zrobić 🙂 ). JavaScript przychodzi mi z pomocą. A dokładniej, wbudowany obiekt JSON i jego metoda parse. Jako argument metoda ta przyjmuje łańcuch znaków, zawierający poprawny JSON, a zwraca obiekt JavaScriptowy. Oto przykład:
1 2 3 4 5 6 |
var userDataString = '{"name":["Jan","Kowalski"],"email":"jan@Kowalski.pl","settings":{"sound":"off","fullScreen":true,"newsDisplayed":5},"Characters":[{"Conen":{"level":10,"items":["topor"],"hungry":true}},{"Druzzt":{"level":4,"items":["sejmitar","sejmitar"],"hungry":true}},{"Garelt":{"level":10,"items":["miecz","miecz"],"hungry":true}}]}' var userData = JSON.parse(userDataString); console.log(userData.name[0]+ " " +userData.name[1]); //Jan Kowalski console.log(userData.email); //jan@Kowalski.pl console.log(userData.settings.fullScreen); //true |
No! Na takim obiekcie można pracować :)! Jak widać, wszystko idzie bardzo łatwo i przyjemnie, nic skomplikowanego 🙂
Teraz zrobię zamianę w drugą stronę, czyli obiekt przekształcę w łańcuch znaków. W tym celu również użyję obiektu JSON a dokładniej jego metody stringify. Ta metoda jako argument przyjmuje obiekt, a zwraca łańcuch znaków. Żadnych zaskoczeń :). OK, czas na kod:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
var userData = { "name":["Jan","Kowalski"], "email" : "jan@Kowalski.pl", "settings" : { "sound" : "off", "fullScreen": true, "newsDisplayed" : 5 }, "Characters" :[{"Conen":{ "level":10, "items":["topor"], "hungry": true } },{ "Druzzt":{ "level":4, "items":["sejmitar","sejmitar"], "hungry": true } },{ "Garelt":{ "level":10, "items":["miecz","miecz"], "hungry": true } }] } var userDataString = JSON.stringify(userData); console.log(userDataString); //{"name":["Jan","Kowalski"],"email":"jan@Kowalski.pl","settings":{"sound":"off","fullScreen":true,"newsDisplayed":5},"Characters":[{"Conen":{"level":10,"items":["topor"],"hungry":true}},{"Druzzt":{"level":4,"items":["sejmitar","sejmitar"],"hungry":true}},{"Garelt":{"level":10,"items":["miecz","miecz"],"hungry":true}}]} |
I tyle, naprawdę nic prostszego 🙂 Przy metodzie stringify zatrzymam się jeszcze na chwilę. Muszę zaburzyć tę kodową sielankę. A to dlatego że, nie wszystko co może znaleźć się w JavaScriptowym obiekcie nadaje się na zamianę w JSON. Czas trochę poeksperymentować.
1 2 3 4 5 6 |
console.log(JSON.stringify(undefined)); //undefined console.log(JSON.stringify([undefined])); //[null] console.log(JSON.stringify({klucz : undefined })); //{} console.log( JSON.stringify( 1/0 )); //null console.log( JSON.stringify( Infinity )); //null console.log( JSON.stringify( [ function(){ return "A"} ] )); //[null] |
Jak widać, z pewnymi typami trzeba uważać. Takie wartości jak undefined, NaN, infinity nie powinny być zaskoczeniem. Natomiast trzeba też wiedzieć, że nie możemy zamienić na łańcuch znaków JSON funkcji. Lepiej może podsumuję jakie wartości możemy zamienić na JSON:
- number
- łańcuch znaków
- wartość boolowska
- tablica
- obiekt
- null
oczywiście tablice mogą zawierać wszystko z powyższych, a obiekt łańcuch znaków jako klucz i wszystko z powyższych jako wartość.
To już wszystko co chciałem poruszyć w tym wpisie. Następnym razem przedstawię przykładową mini aplikację, która korzysta z technologii JSON, oraz AJAX z biblioteki jQuery.
Nadal strasznie ciężko jest mi to zrozumieć. Znaczy, do czego to właściwie ma służyć. Czemu nie mogę się posłużyć zwyczajnym obiektem JavaScript tylko muszę go przerabiać na json i odwrotnie
Na przykład wysyłasz w json coś z jednego systemu (inny język system, urządzenie etc) a sobie implementujesz w drugim. I masz przez to np szybka i łatwa wymianę danych.
bo jak miałbyś przesłać obiekt JavaScriptowy, który miałby niby być dostępny w jakimś programie napisanym np. w PHP? Z poziomu PHP nie możesz używać obiektów z JavaScript.
Np. do wymiany informacji pomiędzy frontendem i backendem gdyż informacje te są „wysyłane” jako tekst czyli JSON jest idealny do tego.
Znam HTML5, CSS3, bootstrap, teraz zabieram się za JavaScript, jQuery i Ajax. Widzę, że JSON to nic skomplikowanego, a trochę mnie martwiło, że będę miał kolejne zagadnienie do nauki.
Brawo ! W końcu jakieś przykłady z życia wzięte a nie wyimaginowane pierdolety ! Kodujemy długo i ciągle się uczymy i wszystko byłoby łatwiejsze gdyby tacy jak Ty pisali TT a nie profesorowie, którzy mają wiedzę teoretyczną ! Szukałem pomocy konkretnego przykładu i tu tak prosto 🙂
Jeszcze raz brawo !
Dziękuję za wpis. Mam pytanie kiedy z php otrzymuję bardziej skomplikowany kod i chciałbym go wyświetlić na stronie za pomocą js. Co zrobić z takim przykładem? bo praser z JSON tego nie przepuszcza.
{„status” : „1”, „kod_html” : ”
cos fajnego
tresci akapitu p
„}
Gdy zamienię wszystkie „” na ” oraz wszystko wstawię w jednej linii to zadziała – ale jak to automatem przekształcić ?
w treści komentarza wycięło znaczniki html – więc nie mam jak załączyć tutaj kodu – trochę bez sensu.
Postaram się to opisać. Chodzi mi o to że dla :kod_html” przypiszę jako wartość kod html który dodatkowo będzie miał cudzysłowy oraz nie będzie w jednej linii to parses nie zadziała.
Czy jest jakaś metoda aby taki kod html jakoś przygotować ?
Przeczytałem kilka razy i udało się zrozumieć – SZACUN dla autora!
Dzięki, dobrze napisane 🙂
a JSON jest wysyłany jako plik na serwer? bo w przykładzie podałeś go jako zmienną userDataString. Ta zmienna jest wrzucana w plik, który jest wysyłany na serwer? dobrze to rozumiem?