Przetwarzanie danych JSON za pomocą JavaScript i jQuery
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 .
Kurs JavaScript - zaawansowany
Zaawansowane techniki pracy w jednym z najpopularniejszych webowych języków Dowiedz się więcej
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
datato 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:
Opublikowane 24 września 2013 r. w kategorii: Programowanie
ŚCIEŻKA KARIERY
13130 uczestników
79 godzin
708 wykładów
Twórz atrakcyjne i funkcjonalne strony internetowe z użyciem nowoczesnych technik. Opanuj kluczowe podstawy, niezbędne narzędzia i zacznij tworzyć wspaniałe strony! Dowiedz się więcej
