Strefa rozwoju osobistego i nowinek ze świata technologii & IT | blog strefakursów.pl
Logo
Hamburger icon Close icon
Go to top
WYNIKI WYSZUKIWANIA:
Przetwarzanie danych JSON za pomocą JavaScript i jQuery

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 .


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:


Kurs JavaScript - zaawansowany

Zaawansowane techniki pracy w jednym z najpopularniejszych webowych języków... Dowiedz się więcej


Kurs Programowania w jQuery

Poznaj najpopularniejszą i niezwykle użyteczną bibliotekę JavaScript... Dowiedz się więcej



Opublikowane 24 września 2013 r. w kategorii: Programowanie


Kompleksowe szkolenie dla Web Designera
Users icon 13130 uczestników
Watch icon 79 godzin
Video icon 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

Interesują Cię nowe technologie?

Zapisz się do naszego newslettera!