JSON, czyli JavaScript Object Notation. Lekki format wymiany danych. Do czego tak na prawdę się przydaje? Do korzystania z różnego rodzaju API, które dzięki formatowi JSON, mogą zostać użyte przez różnorakie technologie, również do przechowywania dużej ilości danych, których nie ma sensu umieszczać zmiennych. Taka wygląda opis, ale to nudne. Przejdźmy do praktyki 🙂

 

W tym tutorialu, postaram się wyjaśnić, jak pobierać dane z pliku JSON oraz jak z nich korzystać. Użyję 2 różnych sposobów – VanillaJS, oraz skrócony sposób za pomocą jQuery.

 

No dobrze. Zaczynajmy.

Na samym początku stwórzmy kilka formatów plików, które będą niezbędne.

 

Prosty plik JSON, nazwijmy go data.json, a w nim zawrzyjmy kilka danych. Dane te muszą się znaleźć w nawiasach []. Grupę danych, umieszczamy w nawiasach {}, tak samo jak obiekt JavaScript. Przykładowe dane będą bardzo proste, a więc numbers

Plik data.json, wygląda tak:

 

 

Skoro podstawowe dane mamy za sobą, przejdźmy do prostego markupu HTML5, gdzie podepniemy plik data.json, jQuery CDN, skrypt, który obsłuży zapytanie XML, oraz stworzymy kontener dla danych z id=”json-wrapper”

 

Plik index.html, będzie wyglądał tak:

 

 

Pozostaje więc skrypt, tutaj też wykorzystamy 2 metody wyciągania danych z pliku data.json

 

JSON i VanillaJS

JSON i vanillaJS

 

Dobra, dla tych, którzy stawiają pierwsze kroki w programowaniu, szybko wytłumaczę czym jest VanillaJS. To nic innego jak zwykł JavaScript. W dobie nadzbiorów, bibliotek i frameworków tego języka, VanillaJS to określenie jego podstawowej formy. Nazwa Vanilla odnosi się do podstawowego smaku lodów, czyli waniliowy. Tej dziwnej, ale jednocześnie logicznej analogii użyto w tym określeniu, całkiem trafnie moim zdaniem 🙂

 

A więc przejdźmy do samego core projektu, czyli skryptu, obsługującego zapytanie XML oraz pobierze dane z naszego pliku w formacie JSON.

 

Na samym początku stwórzmy funkcję zwrotną newJSON() oraz wywołajmy nowe zapytanie XML, dzięki stworzeniu instancji obiektu XMLHttpRequest(). Czym jest funkcja zwrotna (ang. callback)? Jest to funkcja przyjmująca parametr innej funkcji w celu późniejszego jej wywołania. Ma to miejsce kiedy nie do końca wiemy, czym jest zmienna i dokonujemy jej sprawdzenia.

 

 

Skoro instancja obiektu została już stworzona, zajmijmy się jego obsługą. Używamy do tego funkcji open() i dodajmy MIME type, który dla formatu JSON, będzie przyjmował parametr „application/json”. Określamy rodzaj zapytania (‚GET’), plik (‚data.json’) oraz true. Boolean true oznacza zapytanie ansynchroniczne, jeśli nie chcecie korzystać z danych asynchronicznie, wystarczy zmienić na false

 

 

W kolejnym etapie dodajemy EventHandler, czyli onreadystatechange, który będzie nasłuchiwał zmian statusu readyState.

Po co? W tym przykładzie jest to mało istotne, ponieważ mamy lokalny plik data.json. Jednak jeśli będziecie korzystać z zewnętrznego API, dyrektywa warunkowa if, będzie sprawdzała czy po drodze nie pojawiły się błędy, a jeśli jej warunki zostaną spełnione, dane z API będą przekazane, jako parametr funkcji callback.

Warunkami dyrektywy if, są statusy naszego nowego obiektu obj. Co oznaczają?

readyState, zwraca status zapytania XMLHttpReguest, wynik 4 oznacza Done, czyli zapytanie skończone i odpowiedź jest gotowa. Status == 200, oznacza warunek, w którym serwer jest gotowy do obsługi zapytania. Podsumowując, zapytanie zostanie spełnione, w przypadku, kiedy będzie z powodzeniem wysłane do serwera (4), oraz kiedy serwer jest gotowy i odpowiada (200).

Inne wyniki readyState, a jest ich 5, znajdziecie tutaj, znów rodzaje status tutaj

Kod rysuje się następująco:

 

 

Przejdźmy dalej.

Na sam koniec wywołamy funkcję send(), aby wysłać zapytanie i uzyskać dane. Kompletny kod wygląda następująco:

 

 

No dobrze, ale jak pobrać dane, które zapisaliśmy w pliku data.json?

Do tego celu niezbędna będzie pętla for, oraz parsowanie. JSON jest pierwotnie odczytywany jako string, dzięki funkcji parse(), przekształcimy go na obiekt JavaScript. Pętla będzie iterować po danych wyciągniętych z data.json, dzięki czemu będą mogły one pojawić się we wcześniej stworzonym kontenerze.

Dodajmy zatem funkcję init(), w której zawrzemy wcześniejszą funkcję newJSON z parametrem odpowiedzi response, oraz pustyą tablicę, do przechowania danych:

 

 

Pozostaje wcześniej wspomniana pętla for

 

 

Teraz musimy dodać wyniki iteracji do wcześniej stworzonej pustej tablicy items, za pomocą metody push()

 

 

A na sam koniec za pomocą innerHTML, dodajemy elementy z listy do naszego kontenera json-wrapper:

 

Wynik:

 

JSON i jQuery

JSON i jQuery - pobieranie i korzystanie z danych

 

Tak jak wcześniej pobierzemy dane z pliku JSON, ale w mocno uproszczony sposób. Jeśli używacie w swoim projekcie jQuery, warto to wykorzystać. Jeśli nie, lepiej użyć sposobu z VanillaJS, z prostego powodu. Biblioteka jQuery lekka nie jest, dlatego użycie jej jedynie do obsługi zapytania XMLHtttpReguest jest mało optymalne.

 

Plik data.json i markup HTML5, mamy już stworzone, nic się tam nie zmienia, więc przejdźmy bezpośrednio do skryptu.

 

Tutaj sprawa jest tak bardzo uproszczona, całość zawiera się w kilku linijkach kodu. W VanillaJS mieliśmy ich 24, tutaj będzie ledwie 9.

Stwórzmy więc zapytanie XMLHttpRequest, które w tym wypadku zawiera się po prostu w $.getJSON. Przekazujemy jako jego parametr, plik data.json (w przypadku API byłoby to query), oraz funkcję z parametrem data 

 

 

Stwórzmy pustą tablicę items[], która przechowa nasze dane z pliku data.json. Następnie używamy metody $.each.

Czym jest ta metoda?

$.each jest podobna do pętli JavaScript forEach. Z tą różnicą że forEach używana jest do iterowania po tablicach, znów $.each, można użyć do iterowania po każdym zestawie danych.

Jako parametr funkcji $.each, przekazujemy uzyskany wcześniej data, oraz funkcję z parametrami index, i value, czyli wartość.

Dodajmy je do wcześniej stworzonej pustej tablicy items[], za pomocą metody push()

 

Na sam koniec zostaje dodanie zestawu danych do kontenera json-wrapper.

 

To tyle 🙂 Jak widzicie przy użyciu jQuery, pobieranie i korzystanie z danych pliku data.json (lub API), jest bardzo uproszczone. Niemniej jednak, aby dobrze zrozumieć jak działa ta metoda, warto przerobić zapytanie XMLHttpRequest w VanillaJS.

 

Pliki źródłowe można pobrać poniżej, jeśli będziecie chcieli przetestować metody u siebie, lub po prostu z nich skorzystać:

JSON i jQuery

JSON i VanillaJS

 

Jeśli spodobał, lub przydał Ci się artykuł, zostaw komentarz, polub lub udostępnij 🙂

Dobrze prawi dać mu lajka i udostępnić!