JSON dla początkujących, i kompletnie początkujących

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.

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:

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:

Zacznę od zamieniania łańcucha znaków JSON na obiekt JavaScriptowy. Zamiast obiektu, dostajemy taki łańcuch znaków:

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:

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:

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ć.

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.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *