JavaScript: Czym jest JSON

0:00W tej lekcji powiemy o tym, czym jest

0:02JSON i jak z nim pracować w języku JavaScript.

0:05JSON jest to skrót od JavaScript Object Notation

0:08i jest to taki tekstowy format wymiany

0:11danych, który łudząco przypomina obiekty JavaScript.

0:15Zanim przejdę dalej, to utworzymy sobie jakiś obiekt i zaraz do niego się

0:18porównamy i powiemy czym JSON jest. Więc utworzę taki obiekt

0:22jak już wielokrotnie w tym kursie widzieliśmy, taki standardowy.

0:29Czyli mamy tutaj jakieś wartości typu string.

0:31Chciałbym żebyśmy mieli też wartość typu number czyli np.

0:35Age 30 i dodamy sobie jeszcze

0:38hobbies, czyli powiemy, że są to hobby tego właśnie pana,

0:42dodajmy sobie IT,

0:44czyli jest to po prostu tablica ze stringami,

0:47następnie sport i powiedzmy podróżowanie.

0:51I teraz utworzyliśmy JavaScript obiekt.

0:53Natomiast gdybyśmy ten obiekt troszeczkę zmodyfikowali, czyli zrobili coś takiego,

0:58że tutaj bym podał to jako takie wartości stringowe

1:02i ja Ci pokazywałem już w tym kursie, że

1:04możemy w JavaScript w ten sposób to zapisać, ale nie musimy.

1:08Jeżeli bym zrobił coś takiego

1:11to okazuje się, że teraz to co zaznaczę jest poprawnym JSON czyli JSON

1:16to jest format, który wygląda właśnie tak,

1:18że może tutaj być obiekt, w którym są jakieś dane,

1:22natomiast taka pojedyncza tablica też byłaby poprawnym JSON.

1:26Samo null też byłoby poprawnym JSON, 0 czy np.

1:2910 również czy pojedynczy string.

1:31Ale zazwyczaj JSON to będzie jakaś tablica z takimi obiektami albo

1:35bezpośrednio taki obiekt i jakieś właściwości.

1:38I teraz co to znaczy, że to jest JSON?

1:40Jeżeli to zapiszemy oczywiście odświeży się strona,

1:43to dla nas jest to JavaScript obiekt.

1:45Czyli to na razie nie jest JSON, ale jak JSON wygląda.

1:49Natomiast co jest JSON? JSON jest tekst.

1:51Czyli to co tutaj widzimy

1:53dla nas jest to tekstem jako tekst

1:54źródłowy, ale z punktu widzenia JavaScriptu oczywiście jest to obiekt, ale

1:58gdybyśmy sobie dokładnie to skopiowali i napisali byśmy coś takiego jak np.

2:03data i stworzę Template String, czyli

2:05wiemy, że to co będzie wewnątrz jest tekstem, jest stringiem.

2:09Jeżeli tutaj zapiszę coś takiego wygląda niemal identycznie,

2:13natomiast to jest właśnie JSON. Czyli JSON

2:16jest to jakiś tekst, który reprezentuje dane i jest zapisane w odpowiednim formacie.

2:22Czyli gdybyśmy sobie tutaj zerknęli

2:24zauważ, że ja wcześniej tutaj utworzyłem plik person.json

2:27On wygląda właśnie w taki sposób i to co tutaj wpisałem wygląda jak obiekt

2:31JavaScript, ale jest w pliku z rozszerzeniem JSON,

2:34no i jest to właśnie poprawny format JSON.

2:37Więc co w tym formacie jest istotne i czym

2:38on się różni od takiego obiektu JavaScript -owego?

2:42Otóż różni się tym, że jego właściwości zawsze muszą być w cudzysłowach.

2:47Nie można tak zapisać jak w przypadku obiektu JavaScript owego.

2:50Nie można też pojedynczych.

2:51Zawsze musi to tak wyglądać.

2:53I wartości jakie możemy tutaj

2:54reprezentować to będzie string, to będzie number lub np.

2:58tablica.

2:59Natomiast nie można tutaj zapisać jakiejś funkcji itd.

3:02A więc funkcja nie może być

3:03zapisana w JSON, a co za tym idzie jak ten JSON za chwilę Ci pokażę

3:07zamienimy na obiekt JavaScript, to tej funkcji byśmy tam mieć nie mogli.

3:11Czyli tylko takie wartości jak tutaj widzisz.

3:13Tu jeszcze może być oczywiście przechowywane np.

3:15true lub false i null. Więc tak to wygląda.

3:19To jest plik JSONowy

3:20I dlaczego o tym mówię?

3:21Dlatego, że z punktu widzenia właśnie

3:23programistów JavaScript to wygląda jak obiekt JavaScript,

3:26natomiast jeżeli ktoś programuje w innym

3:27języku takim jak PHP, to ten JSON nic mu nie przypomina, ale

3:31również w języku PHP z takim JSON pracować można.

3:35No i teraz chcę Ci pokazać co można zrobić z

3:37takim JSON, zakładając, że jest to ciąg znaków, czyli string.

3:41Teraz nie jest to już obiekt.

3:42Taki JSON możemy sobie albo odczytać z pliku, albo co jest dużo częściej

3:46wykorzystywane i tym się zajmiemy w kolejnych lekcjach

3:49pobrać sobie dane w formacie JSON z serwera.

3:52My wtedy z serwera otrzymamy jakby do

3:54naszego języka JavaScript, do tej części JavaScript w przeglądarce

3:58otrzymamy po prostu tekst, czyli dokładnie taki jak tutaj tekst.

4:02Z punktu widzenia języka JavaScript pod data nie ma żadnych danych,

4:05to jest tylko tekst. Ale taki tekst możemy zamienić na obiekt

4:09taki jak tutaj widzimy. I do tego służą w języku JavaScript dwie

4:13metody. Jedna do zamiany w jedną stronę, druga w drugą.

4:16Czyli mógłbym zrobić to od razu np.

4:18w konsoli. Odwołać się do JSON pisane wielkimi literami.

4:21To jest dostępne w języku JavaScript i następnie parse.

4:25Do tej metody musimy przekazać string,

4:27czyli właśnie tekst, który reprezentuje dane w formacie JSON.

4:31A więc zróbmy to, przekażemy tutaj data i zobacz co się wyświetli w konsoli.

4:35Otóż wyświetlił się już tym razem

4:37prawdziwy obiekt, a to oznacza, że z takiego tekstu za pomocą JSON.parse

4:41możemy zrobić prawdziwy obiekt, identyczny jak ten u góry

4:44i gdybym sobie go zapisał np.

4:46tutaj w zmiennej napiszmy parsed, coś takiego.

4:53I tutaj sobie to podstawimy

4:54żeby wiedzieć o co chodzi, to mógłbym na tym parsed odwołać się do poszczególnych

4:57właściwości, które tutaj widzimy w firstName, lastName, age itd.

5:01I np.

5:01to będzie zamienione na tablicę poprawnie i tak dalej.

5:04Jeżeli tu by się znajdowała jakaś funkcja,

5:06tak jak wspominałem, to nie byłby to już poprawny JSON.

5:09Nie dałoby się tego sparsować. Więc JSON wygląda

5:11niemal identycznie jak taki obiekt JavaScript

5:14ale ważne jest to, że z punktu widzenia języka JSON to jest po prostu tekst,

5:18który za pomocą metody JSON.parsed można zamienić na prawdziwy obiekt.

5:22I teraz można zrobić to również w drugą stronę.

5:25Gdybyśmy chcieli taki obiekt jak tutaj mamy np.

5:27person zamienić na właśnie taki tekst po to, aby na przykład wysłać go do serwera,

5:33to zrobimy to metodą i zrobimy też console.logu

5:36JSON.stringify.

5:38Wygląda ona tak i podajemy tutaj obiekt

5:41tym razem. Możesz podać tablicę, możesz podać liczbę,

5:43wszystko to co na JSON da się zamienić tak jak już wcześniej Ci powiedziałem.

5:47Więc podamy sobie ten obiekt person i w konsoli przeglądarki zobaczymy ciąg znaków.

5:52To jest zwykły string i taki string można np.

5:55Ajaxem, o czym w kolejnych lekcjach przesłać do serwera,

5:58serwer potrafi go wtedy odczytać w zupełnie innym języku.

6:01To może być powiedzmy język PHP czy np.

6:04Java albo ASP.NET

6:06potrafi to odczytać, zamienić na swój własny obiekt, bo np.

6:10w PHP takie obiekty nazywane też tablicami

6:12asocjacyjnymi wyglądają troszeczkę inaczej i może z tym pracować.

6:16A więc jest to format wymiany danych.

6:18My możemy z serwera otrzymać taki ciąg,

6:20potrafimy go zamienić na obiekt, dzięki czemu możemy z nim pracować, ale również

6:24możemy wysłać taki JSON do serwera najpierw tworząc sobie obiekt, ustawiając

6:28wszystkie jego właściwości i następnie robiąc stringify i wysyłając go do serwera.

6:33Serwer u siebie też zrobi sobie parsed z użyciem dowolnego języka jaki pracuje na

6:37serwerze i też będzie mógł na takim obiekcie pracować.

6:41Jeżeli natomiast dla podglądu chciałbyś żeby to wyglądało ładniej to do metody

6:45stringify można podać jako drugi parametr taką specjalną funkcję, która

6:48pozwala nam niektóre rzeczy inaczej sformatować, coś porzucić, coś wyrzucić,

6:53nie będziemy się tym zajmować, więc podamy null, ale jako trzeci parametr możemy

6:56podać number ile spacji wcięcia chcemy zrobić.

6:59Jeżeli to zrobię w ten sposób, to tutaj

7:01będą cztery spacje, wcięcia i będzie to po prostu ładniej wyglądać

7:04jeżeli chcielibyśmy podejrzeć. Natomiast

7:06zapamiętaj stringify stworzyło nam tekst, który można powiedzieć, że nie ma

7:10żadnego znaczenia, ale w odpowiednim języku programowania przepuszczony przez

7:14odpowiednią funkcję tworzy prawdziwy obiekt.

7:16W JavaScripcie taki tekst przepuszczony

7:18przez JSON.parse tworzy nam obiekt, na którym możemy pracować.

7:22No i w kolejnych lekcjach pokażę Ci, jak

7:23możemy z serwera pobrać sobie taki JSON, czyli taki tekst,

7:27zamienić go odpowiednio na obiekt, no i np. wyświetlić na stronie.