Jak pracować z JSON w JavaScript

wprowadzenie

ponieważ JSON pochodzi z języka programowania JavaScript, naturalnym wyborem jest użycie go jako formatu danych w JavaScript. JSON, skrót od JavaScript Object Notation, jest zwykle wymawiany jak nazwa ” Jason.”

aby dowiedzieć się więcej o JSON w kategoriach ogólnych, przeczytaj samouczek „wprowadzenie do JSON”.

aby zacząć myśleć o tym, gdzie możesz używać JSON w swoich programach JavaScript, niektóre ogólne przypadki użycia JSON obejmują:

• przechowywanie danych
• generowanie struktur danych z danych wejściowych użytkownika
• przesyłanie danych z serwera do klienta, klienta na serwer i serwera na serwer
• Konfigurowanie i weryfikacja danych

Ten poradnik dostarczy Ci wprowadzenia do pracy z JSON w JavaScript. Aby jak najlepiej wykorzystać to wprowadzenie, powinieneś mieć pewną znajomość języka programowania JavaScript.

Format JSON

format JSON jest pochodną składni obiektu JavaScript, ale jest w całości oparty na tekście. Jest to format danych o wartości klucza, który jest zwykle renderowany w nawiasach klamrowych.

podczas pracy z JSON, prawdopodobnie zobaczysz obiekty JSON w pliku.json, ale mogą one również istnieć jako obiekt JSON lub łańcuch znaków w kontekście programu. Przeczytaj więcej o składni i strukturze tutaj.

gdy pracujesz z plikiem .json, będzie on wyglądał następująco:

{ "first_name" : "Sammy", "last_name" : "Shark", "online" : true }

Jeśli zamiast tego masz obiekt JSON w pliku .js lub .html, prawdopodobnie zobaczysz go ustawionego na zmienną:

var sammy = { "first_name" : "Sammy", "last_name" : "Shark", "online" : true }

dodatkowo JSON może być wyświetlany jako ciąg znaków, a nie jako obiekt w kontekście pliku lub skryptu programu JavaScript. W tym przypadku możesz również zobaczyć to wszystko w jednej linii:

var sammy = '{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}';

Konwersja obiektów JSON na ciągi znaków może być szczególnie przydatna do szybkiego przesyłania danych.

omówiliśmy ogólny format JSON i sposób, w jaki można oczekiwać, że będzie to plik.json lub w JavaScript jako obiekt lub ciąg znaków.

porównanie do obiektu JavaScript

warto pamiętać, że JSON został opracowany do użytku przez dowolny język programowania, podczas gdy obiekty JavaScript mogą być obsługiwane tylko bezpośrednio przez język programowania JavaScript.

pod względem składni Obiekty JavaScript są podobne do JSON, ale klucze w obiektach JavaScript nie są ciągami znaków w cudzysłowie. Ponadto Obiekty JavaScript są mniej ograniczone pod względem typów przekazywanych do wartości, więc mogą używać funkcji jako wartości.

spójrzmy na przykład obiektu JavaScript użytkownika strony Sammy Shark, który jest aktualnie online.

var user = { first_name: "Sammy", last_name : "Shark", online : true, full_name : function() { return this.first_name + " " + this.last_name; }};

To będzie wyglądać bardzo znajomo jako obiekt JSON, ale nie ma cudzysłowów wokół żadnego z kluczy (first_namelast_nameonline, lub full_name), a w ostatniej linijce znajduje się wartość funkcji.

jeśli chcemy uzyskać dostęp do danych w powyższym obiekcie JavaScript, możemy użyć notacji kropkowej, aby wywołać user.first_name;I uzyskać ciąg znaków, ale jeśli chcemy uzyskać dostęp do pełnej nazwy, musielibyśmy to zrobić, wywołując user.full_name();, ponieważ jest to funkcja.

Obiekty JavaScript mogą istnieć tylko w języku JavaScript, więc podczas pracy z danymi, które muszą być dostępne w różnych językach, najlepiej jest wybrać JSON.

dostęp do danych JSON

dostęp do danych JSON jest zwykle dostępny w Javascript poprzez notację kropkową. Aby zrozumieć, jak to działa, rozważmy obiekt JSON sammy:

var sammy = { "first_name" : "Sammy", "last_name" : "Shark", "online" : true }

aby uzyskać dostęp do dowolnej wartości, użyjemy notacji kropkowej, która wygląda następująco:

sammy.first_namesammy.last_namesammy.online

zmienna sammy jest pierwszy, następnie kropka, a następnie Klucz do uzyskania dostępu.

aby utworzyć alert JavaScript, który pokazuje nam wartość związaną z kluczem first_name w wyskakującym okienku, możemy to zrobić, wywołując funkcję JavaScript alert() :

alert(sammy.first_name);

Output
Sammy

tutaj pomyślnie wywołaliśmy wartość związaną z kluczemfirst_name z obiektu JSONsammy.

możemy również użyć składni nawiasów kwadratowych, aby uzyskać dostęp do danych z JSON. Aby to zrobić, trzymamy klucz w podwójnych cudzysłowach w nawiasach kwadratowych. Dla naszej zmiennejsammy powyżej, użycie składni nawiasu kwadratowego w funkcjialert() wygląda następująco:

alert(sammy);

Output
true

podczas pracy z zagnieżdżonymi elementami tablicy należy wywołać numer elementu w tablicy. Rozważmy JSON poniżej:

var user_profile = { "username" : "SammyShark", "social_media" : }

aby uzyskać dostęp do łańcucha facebook, możemy wywołać ten element w tablicy w kontekście notacji kropkowej:

alert(user_profile.social_media.description);

Output
facebook

zauważ, że dla każdego zagnieżdżonego elementu użyjemy dodatkowej kropki.

używanie notacji kropkowej lub składni nawiasów kwadratowych pozwala nam uzyskać dostęp do danych zawartych w formacie JSON.

funkcje do pracy z JSON

w tej sekcji przyjrzymy się dwóm metodom stringowania i parsowania JSON. Możliwość konwersji JSON z object na string i odwrotnie jest przydatna do przesyłania i przechowywania danych.

JSON.stringify()

funkcja JSON.stringify() konwertuje obiekt na łańcuch JSON.

stringi są przydatne do transportu danych z Klienta na serwer poprzez przechowywanie lub przekazywanie informacji w lekki sposób. Na przykład możesz zebrać ustawienia użytkownika po stronie klienta, a następnie wysłać je na serwer. Następnie możesz odczytać informacje za pomocą metody JSON.parse() I Pracować z danymi w razie potrzeby.

przyjrzymy się obiektowi JSON, który przypisujemy do zmiennejobj, a następnie przekonwertujemy go za pomocąJSON.stringify() przekazującobj do funkcji. Możemy przypisać ten łańcuch do zmiennej s:

var obj = {"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}var s = JSON.stringify(obj)

teraz, jeśli będziemy pracować z s, będziemy mieli JSON Dostępny dla nas jako łańcuch, a nie obiekt.

'{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}'

funkcja JSON.stringify() pozwala nam konwertować obiekty na ciągi znaków. Aby zrobić odwrotnie, przyjrzymy się funkcjiJSON.parse().

JSON.Parse ()

ciągi są przydatne do transportu, ale będziesz chciał być w stanie przekonwertować je z powrotem na obiekt JSON po stronie klienta i / lub serwera. Chociaż możesz przekonwertować tekst na obiekt za pomocą funkcjieval(), nie jest ona zbyt bezpieczna, więc użyjemy funkcjiJSON.parse().

aby przekonwertować przykład w JSON.w powyższej sekcji stringify() przekazalibyśmy do funkcji łańcuch s I przypisaliśmy go do nowej zmiennej:

var o = JSON.parse(s)

wtedy mielibyśmy do pracy obiekt o, który byłby identyczny z obiektem obj.

aby przyjrzeć się dokładniej, rozważmy przykład JSON.parse() w kontekście pliku HTML:

<!DOCTYPE html><html><body><p></p><script>var s = '{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}';var obj = JSON.parse(s);document.getElementById("user").innerHTML ="Name: " + obj.first_name + " " + obj.last_name + "<br>" +"Location: " + obj.location;</script></body></html>

Output
Name: Sammy SharkLocation: Ocean

w kontekście pliku HTML możemy zobaczyć, w jaki sposób łańcuch JSONs jest konwertowany do obiektu, który można pobrać podczas ostatecznego renderowania strony poprzez dostęp do JSON za pomocą notacji kropkowej.

JSON.parse() jest bezpieczną funkcją do analizowania ciągów JSON i konwertowania ich na obiekty.

wniosek

JSON jest naturalnym formatem używanym w JavaScript i ma wiele implementacji dostępnych do użytku w wielu popularnych językach programowania. Jeśli chcesz użyć formatu w innym języku programowania, możesz zobaczyć pełną obsługę językową na stronie” Introducing JSON”.

ponieważ jest lekki i jest łatwo przenoszony między językami programowania i systemami, JSON doświadcza zwiększonego wsparcia w API, w tym w API Twittera.