Samouczek dotyczący pracy z JSON.parse() i JSON.stringify()

Hark Labs2022-04-28 · 5 min read

Samouczek dotyczący pracy z JSON.parse() i JSON.stringify()

JSON oznacza JavaScript Object Notation. Służy do opisywania obiektów JavaScript. Jest to format wymiany danych, który określa wartości danych za pomocą par klucz-wartość. Obiekt JSON jest obsługiwany przez wszystkie główne przeglądarki. Ten samouczek wymaga znajomości języka JavaScript i pracy z obiektem JSON. Aby zapoznać się z JSON, możesz rzucić okiem na nasz przegląd formatu wymiany danych JSON. Możesz również sprawdzić, jak pracować z JSON w JavaScript.

Format JSON jest również używany do przesyłania danych przez sieć. W tym celu dane muszą zostać poddane serializacji i deserializacji. Gdy dane są w formacie JSON, są konwertowane na ciąg znaków za pomocą metody stringify . Aby przekonwertować dane z powrotem na format obiektu w celu ich modyfikacji, używana jest metoda parse . Ten samouczek omówi kroki korzystania z JSON.parse() oraz JSON.stringify(). Zaczynajmy!

JSON.parse()

Ta metoda służy do konwersji ciągu znaków JSON na obiekt JSON, dzięki czemu można nim manipulować programowo. Przekazywany ciąg znaków musi być prawidłowym ciągiem JSON, w przeciwnym razie zostanie zgłoszony wyjątek. Ten ciąg znaków może zostać odebrany z dowolnej usługi sieciowej lub zdalnej aplikacji.

Ta metoda przyjmuje dwa parametry: string oraz funkcję callback, która może być użyta do zmodyfikowania ciągu znaków przed jego konwersją na obiekt. Załóżmy, że otrzymujemy komunikat z usługi sieciowej wskazujący status operacji, wiadomość i kod statusu. Poniżej znajduje się prosty przykład pokazujący, jak ciąg znaków może zostać przekonwertowany na obiekt.

Kod:

let json_string = '{"message":"Done with success", "status":200, "code":200}'
let server_obj = JSON.parse(json_string);
console.log(server_obj)

let json_string = '{"message":"Done with success", "status":200, "code":200}'

let server_obj = JSON.parse(json_string);

console.log(server_obj)

Wynik:

{message: 'Done with success', status: 200, code: 200}

1	{message: 'Done with success', status: 200, code: 200}

Częstym problemem jest dodawanie przecinków końcowych do ciągu znaków, przez co metoda JSON.parse() zgłasza błąd, jeśli przekazany do niej ciąg znaków zawiera przecinki końcowe. Jeśli chcesz zmodyfikować wartości, możesz przekazać funkcję callback jako drugi argument.

Kod:

let string = '{"name":"XYZ","email":"xyz@example.com"}';
let obj = JSON.parse(string, (key, value) => {
    if (typeof value === 'string') {
        return value.toUpperCase();
    }
return value;
});

console.log(obj)

let string = '{"name":"XYZ","email":"xyz@example.com"}';

let obj = JSON.parse(string, (key, value) => {

if (typeof value === 'string') {

return value.toUpperCase();

}

return value;

});

console.log(obj)

Wynik:

{name: 'XYZ', email: 'XYZ@EXAMPLE.COM'}

1	{name: 'XYZ', email: 'XYZ@EXAMPLE.COM'}

JSON.stringify()

Metoda stringify robi dokładnie coś przeciwnego do metody parse . W tym przypadku przekazywany jest obiekt JSON, a zwracaną wartością jest ciąg znaków. Ten ciąg znaków może być na przykład przekazany do innej zdalnej usługi sieciowej, a następnie ponownie sparsowany do obiektu JSON w celu manipulacji.

Kod:

let obj = {message:"Done with success", status:200, code:200}
let str = JSON.stringify(obj);
console.log(str);

let obj = {message:"Done with success", status:200, code:200}

let str = JSON.stringify(obj);

console.log(str);

Wynik:

{"message":"Done with success","status":200,"code":200}

1	{"message":"Done with success","status":200,"code":200}

Metoda stringify może przyjmować dwa argumenty: replaceroraz spacer . Metoda replacer może być użyta do zastąpienia lub wykluczenia dowolnych wartości w ciągu znaków.

Kod:

let obj = {message:"Done with success", status:200, code:200}
let str = JSON.stringify(obj, (key, value) => {
    if (status === 200) {
        return undefined;
    }
    return value;
});

console.log(str)

let obj = {message:"Done with success", status:200, code:200}

let str = JSON.stringify(obj, (key, value) => {

if (status === 200) {

return undefined;

}

return value;

});

console.log(str)

Wynik:

{"message":"Zakończono sukcesem","status":200,"code":200}

1	{"message":"Zakończono sukcesem","status":200,"code":200}

Gdy spacer zostanie podany, każdy element tablicy lub obiektu jest umieszczany w nowej linii i wcięty, aby wskazać jego głębokość w hierarchii obiektów i tablic. Poniżej znajduje się prosty fragment kodu ilustrujący to działanie.

Kod:

let obj = {message:"Zakończono sukcesem", status:200, code:200}
let str = JSON.stringify(obj, null, "---");
console.log(str)

let obj = {message:"Zakończono sukcesem", status:200, code:200}

let str = JSON.stringify(obj, null, "---");

console.log(str)

Wynik:

{
---"message": "Zakończono sukcesem",
---"status": 200,
---"code": 200
}

{

---"message": "Zakończono sukcesem",

---"status": 200,

---"code": 200

}

Podsumowanie

W tym samouczku przyjrzeliśmy się dwóm pomocnym metodom pracy z zawartością w formacie JSON. Obiekty JSON są wszędzie, a podczas budowania nowoczesnych aplikacji przy użyciu języka JavaScript metody te są bardzo przydatne. Aby dowiedzieć się więcej, zapoznaj się z poniższymi samouczkami na naszym blogu:

Miłego kodowania!

Hark Labs

Autor · CloudSigma

Preslav Dobrev jest projektantem kreatywnym w CloudSigma, skupiającym się na spójnej tożsamości biznesowej przy wykorzystaniu tradycyjnych i innowacyjnych kanałów marketingowych. Biegle łączy wizję artystyczną ze strategicznym marketingiem, tworząc wywierające wpływ narracje marki.

Samouczek dotyczący pracy z JSON.parse() i JSON.stringify()

JSON.parse()

JSON.stringify()

Podsumowanie

Hark Labs

Komentarze