Wprowadzenie
Istnieje wiele sposobów, na które JSON może być używany w JavaScript. Jednym z jego najbardziej podstawowych zastosowań jest przechowywanie danych. Można go również używać do przesyłania danych między klientami, między serwerami lub z serwera do klienta. Inne przydatne zastosowania obejmują możliwość konfigurowania i weryfikowania danych, a także generowania struktur danych.
W tym samouczku przyjrzymy się, jak można używać JSON w programach JavaScript. Jeśli masz już wcześniejsze doświadczenie w programowaniu w JavaScript, powinno to być dla Ciebie proste.
Co to jest JSON?
JSON to skrót od JavaScript Object Notation. Jest to format zaprojektowany w celu umożliwienia udostępniania różnych typów danych. JSON wykorzystuje głównie JavaScript jako swój podstawowy język programowania. Działa również z innymi językami, takimi jak Python, PHP, Ruby, a także Java. Jest łatwy do odczytania, niezwykle lekki i nie wymaga skomplikowanego formatowania. Możesz zapoznać się z ogólną składnią i strukturą tego formatu, śledząc nasz samouczek: Przegląd formatu udostępniania danych JSON.
JSON może być używany samodzielnie lub zdefiniowany w innym formacie pliku. Gdy jest używany samodzielnie, korzysta z rozszerzenia .json. W innym formacie pojawia się jako ciąg znaków JSON w cudzysłowie lub jako obiekt przypisany do zmiennej. Na przykład JSON może być również używany w formacie .html. Ten format umożliwia stosunkowo łatwe przesyłanie danych między serwerem a przeglądarką.
Format JSON jest oparty na tekście. Dane klucz-wartość pojawiają się w nawiasach klamrowych. Oto jak wygląda typowy plik .json :
|
1 2 3 4 5 |
{ "first_name" : "Sammy", "last_name" : "Shark", "online" : true } |
Jeśli masz obiekt JSON w pliku .js lub .html, pojawi się on jako zmienna w ten sposób:
|
1 2 3 4 5 |
var sammy = { "first_name" : "Sammy", "last_name" : "Shark", "online" : true } |
W niektórych przypadkach możesz zobaczyć je wszystkie w jednej linii. Dzieje się tak, gdy JSON jest renderowany jako ciąg znaków, a nie jako obiekt w pliku JavaScript:
|
1 |
var sammy = '{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}'; |
Możesz konwertować obiekty JSON na ciągi znaków. Jest to przydatne, gdy chcesz wykonać szybki transfer danych.
JSON a obiekt JavaScript
Jak wspomnieliśmy wcześniej, JSON działa z każdym językiem programowania. Jednak z obiektami JavaScript można pracować tylko przy użyciu języka JavaScript. Składnia w JSON i JavaScript jest podobna. Różnica polega na tym, że w obiektach JavaScript klucze nie muszą być w cudzysłowach. Dodatkowo obiekty JavaScript mogą używać funkcji jako wartości, co oznacza, że są mniej ograniczone.
W poniższym przykładzie pokazujemy obiekt JavaScript użytkownika. Użytkownik to Sammy Shark i jest on teraz online:
|
1 2 3 4 5 6 7 8 |
var user = { first_name: "Sammy", last_name : "Shark", online : true, full_name : function() { return this.first_name + " " + this.last_name; } }; |
Jak widać, nie ma cudzysłowów wokół żadnych kluczy, takich jak first_name, last_name, online, lub full_name. Ponadto w ostatniej linii umieszczono funkcję jako wartość. Jeśli chcesz uzyskać dostęp do danych, możesz wywołać user.first_name przy użyciu zapisu z kropką. Jeśli zamiast tego chcesz uzyskać pełne imię i nazwisko, użyjesz user.full_name(), ponieważ jest to funkcja.
Jak uzyskać dostęp do danych JSON
Jak wspomnieliśmy w poprzedniej sekcji, dostęp do danych JSON w JavaScript można uzyskać za pomocą zapisu z kropką. Weźmy jako przykład obiekt JSON o nazwie sammy:
|
1 2 3 4 5 |
var sammy = { "first_name" : "Sammy", "last_name" : "Shark", "online" : true } |
Nasz zapis z kropką umożliwiający dostęp do wartości będzie wyglądał następująco:
|
1 2 3 |
sammy.first_name sammy.last_name sammy.online |
Najpierw podajemy zmienną. Następnie stawiamy kropkę. Na końcu wskazujemy klucz, do którego chcemy uzyskać dostęp.
Załóżmy, że chcemy utworzyć alert w JavaScript, który pokazuje wartość first_name klucza. Aby pojawił się w wyskakującym oknie, użyjemy funkcji JavaScript alert() w ten sposób:
|
1 |
alert(sammy.first_name); |
|
1 2 |
Wynik Sammy |
Innym sposobem na uzyskanie dostępu do danych z JSON jest użycie składni nawiasów kwadratowych. Klucz powinien być umieszczony w podwójnych cudzysłowach wewnątrz nawiasów kwadratowych. Oto kontynuacja poprzedniego przykładu:
|
1 |
alert(sammy["online"]); |
|
1 2 |
Wynik true |
A co jeśli pracujesz z zagnieżdżonymi elementami tablicy? W takim przypadku musisz podać numer elementu w tablicy. Weźmy następujący przykład:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
var user_profile = { "username" : "SammyShark", "social_media" : [ { "description" : "twitter", "link" : "https://twitter.com/digitalocean" }, { "description" : "facebook", "link" : "https://www.facebook.com/DigitalOceanCloudHosting" }, { "description" : "github", "link" : "https://github.com/digitalocean" } ] } |
Załóżmy, że chcemy uzyskać dostęp do ciągu znaków facebook. Oto jak użyjemy notacji kropkowej, aby uzyskać dostęp do tego elementu w tablicy za pomocą jego numeru:
|
1 |
alert(user_profile.social_media[1].description); |
|
1 2 |
Wynik facebook |
Pamiętaj, aby dodać dodatkową kropkę dla każdego zagnieżdżonego elementu.
Funkcje używane z JSON
Następnie przyjrzymy się kilku funkcjom, których można używać z JSON. Przesyłanie i przechowywanie danych staje się całkiem łatwe, gdy można przekonwertować JSON z obiektu na ciąg znaków lub z ciągu znaków na obiekt. Zbadamy, jak można przekształcić JSON w ciąg znaków (stringify) i sparsować go na dwa różne sposoby:
- JSON.stringify()
Ciągi znaków są lepsze, gdy próbuje się przesyłać dane w lekki sposób. Dlatego są używane do przechowywania i przesyłania danych z klienta do serwera. Rozważmy następujący przykład. Załóżmy, że zbierasz dane o ustawieniach użytkownika na jednym urządzeniu. Musisz wysłać te informacje na swój serwer. Do tego celu użyjesz ciągu znaków. Następnie możesz przekonwertować go z powrotem za pomocą JSON.parse(), aby go odczytać i z nim pracować.
Funkcja, którą tutaj wyróżnimy, to JSON.stringify(). Ta funkcja konwertuje obiekt JSON na ciąg znaków JSON. W tym przykładzie przypiszemy nasz obiekt do zmiennej obj. Przekonwertujemy go za pomocą JSON.stringify() funkcji. Aby to zrobić, przekażemy obj do funkcji, a następnie przypiszemy ciąg znaków do zmiennej s w ten sposób:
|
1 2 |
var obj = {"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"} var s = JSON.stringify(obj) |
Wywołanie zmiennej s da Ci JSON jako ciąg znaków:
|
1 |
'{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}' |
- JSON.parse()
Co zrozumiałe, JSON.parse() pełni odwrotną funkcję. Po zakończeniu przesyłania danych musisz przekonwertować je z powrotem na obiekt JSON, aby móc z nimi pracować. Jedną z opcji jest użycie funkcji eval(). Jednak to podejście nie jest zbyt bezpieczne. Dlatego wolimy używać funkcji JSON.parse().
Rozważmy jeszcze raz poprzedni przykład. Przekażemy ciąg znaków s do funkcji JSON.parse(). Następnie przypiszemy go do nowej zmiennej:
|
1 |
var o = JSON.parse(s) |
Nasz nowy obiekt to teraz o. Będzie on taki sam jak obj. Większy wgląd uzyskamy, gdy rozważymy JSON.parse() w pliku HTML w ten sposób:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <body> <p id="user"></p> <script> var s = '{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}'; var obj = JSON.parse(s); document.getElementById("user").innerHTML = "Imię: " + obj.first_name + " " + obj.last_name + "<br>" + "Lokalizacja: " + obj.location; </script> </body> </html> |
Tutaj możesz zobaczyć, jak przekonwertowaliśmy ciąg znaków s w obiekt, z którego można pobierać dane. W ten sposób JSON.parse() jest bezpieczną opcją do konwersji ciągów znaków JSON na obiekty.
Podsumowanie
Jak widzieliśmy w tym samouczku, JSON ma wiele zastosowań w JavaScript. Jest szczególnie przydatny, ponieważ można go używać z niemal każdym językiem programowania, co czyni go naturalnym wyborem. Ponadto dopiero co liznęliśmy temat. Z JSON można zrobić o wiele więcej. Jest on już obsługiwany w interfejsach API.
Oto dodatkowe zasoby z naszego bloga które pomogą Ci programować w JavaScript:
- Dowiedz się, jak działają prototypy i dziedziczenie w JavaScript.
- Dowiedz się szczegółowo, jak dodać JavaScript do HTML.
- Jeśli tworzysz własną aplikację internetową, zapoznaj się z naszym przewodnikiem po wyborze najlepszej konfiguracji serwera.
Miłego kodowania!
Komentarze
Brak komentarzy. Bądź pierwszy.