JSON to lekki format wymiany danych, który stanowi ciekawą alternatywę dla rozwiązań opartych na XML. Posiada przejrzystą, czytelną dla człowieka strukturę i może być przetwarzany przez wiele popularnych języków programowania. JSON używany jest do przesyłania informacji z serwera do aplikacji klienta. Typowy przykład zastosowania to witryny internetowe oparte na technologii AJAX .

W poniższym artykule opiszemy podstawy użycia JSON w prostej aplikacji opartej na JavaScript. Rozpoczniemy od zdefiniowania struktury danych czyli pliku JSON umieszczonego na serwerze. Stworzymy dokument o nazwie dane.json i wprowadzimy do niego następującą zawartość:

{"products":[ { "name":"Kurs JavaScript", "price":"55zł", "category":"Internet" }, { "name":"Kurs jQuery", "price":"49zł", "category":"Internet" } ]}

Mamy tutaj do czynienia z prostą strukturą, która przechowuje informacje na temat dwóch produktów. Wszystkie dane definiujemy w formie pary klucz-wartość . Nadrzędnym elementem jest klucz products, a jego wartością jest tablica z informacjami na temat produktów. Każdy produkt zawiera trzy pary opisujące jego właściwości: nazwę, cenę oraz kategorię. Wyraźnie widać, że JSON umożliwia użycie prostych, czytelnych struktur. Zdefiniowanie tych samych danych za pomocą XML wymagałoby użycia sporej ilości znaczników, co w konsekwencji przełożyłoby się na większy rozmiar pliku. W typowych aplikacjach internetowych ma to olbrzymie znaczenie.

Spróbujmy teraz przetworzyć te dane po stronie klienta. Stworzymy prosty dokument HTML i dodamy do niego skrypt, który odczyta dane z pliku JSON. Dla uproszczenia zakładamy, że zarówno dokument HTML jak i plik JSON znajdują się w tym samym katalogu na serwerze. W praktyce możemy przygotować dane JSON np. za pomocą PHP albo zbliżonej technologii.

Popatrzmy teraz na kod skryptu:

<html lang="pl"><meta charset="utf-8" /> <title>Dane JSON</title> <script src="jquery-1.10.2.min.js"></script> <div id="content"> </div> <script> $.getJSON('dane.json', function(data){ var output = "<ul>"; for (var i in data.products){ output += "<li>" + data.products[i].name + "</li>"; output += "<li>" + data.products[i].price + "</li>"; output += "<li>" + data.products[i].category + "</li>"; } output += "</ul>"; document.getElementById('content').innerHTML = output; }); </script>

Używamy popularnej biblioteki jQuery, za pomocą której będziemy mogli bez problemu przetworzyć dane z pliku.

$.getJSON('dane.json', function(data){ /* kod przetwarzający dane */ });

Funkcja getJSON przyjmuje dwa argumenty:

  • nazwę pliku z danymi (czyli dane.json)
  • funkcję, która te dane przetworzy (argument data to oczywiście dane z pliku).

Używamy pętli, która wygeneruję listę punktowaną i wstawi ją do struktury dokumentu HTML. Najpierw odwołujemy się do elementu zewnętrznego: data.products. Następnie do każdej pozycji na liście wstawiamy informacje na temat produktu. Używamy typowo obiektowej notacji z kropką (np. data.products[i].name).

Wyraźnie widać, że przetwarzanie danych typu JSON za pomocą JavaScript/jQuery jest bardzo proste. Możemy odwołać się do każdej wartości w pliku przy użyciu niewielkiej ilości kodu.

Więcej informacji na temat JSON i powiązanych technologii (wraz z licznymi przykładami) znajdziesz w kursach:

Dowiedz się więcej: Kurs JavaScript – zaawansowany Zobacz kurs
Dowiedz się więcej: Kurs jQuery – zaawansowany Zobacz kursy