Ein Tutorial über die Arbeit mit JSON.parse() und JSON.stringify()

Hark Labs2022-04-28 · 5 min read

Ein Tutorial über die Arbeit mit JSON.parse() und JSON.stringify()

JSON steht für JavaScript Object Notation. Es wird verwendet, um JavaScript-Objekte zu beschreiben. Es ist ein Format zum Datenaustausch, das Datenwerte mithilfe von Schlüssel-Wert-Paaren angibt. Das JSON-Objekt wird von allen gängigen Browsern unterstützt. Dieses Tutorial setzt voraus, dass Sie mit JavaScript und der Arbeit mit dem JSON-Objekt vertraut sind. Um sich mit JSON vertraut zu machen, können Sie einen Blick auf unsere Übersicht über das JSON-Datenaustauschformat werfen. Sie können sich auch ansehen, wie Sie mit JSON in JavaScript arbeiten.

Das JSON-Format wird auch zur Übertragung von Daten über das Netzwerk verwendet. Zu diesem Zweck müssen Daten serialisiert und deserialisiert werden. Wenn die Daten im JSON-Format vorliegen, werden sie mithilfe der stringify-Methode in eine Zeichenkette umgewandelt. Um die Daten zur Bearbeitung wieder in das Objektformat zu konvertieren, wird die parse-Methode verwendet. Dieses Tutorial wird die Schritte zur Verwendung von JSON.parse() und JSON.stringify() durchgehen. Lassen Sie uns beginnen!

JSON.parse()

Diese Methode wird verwendet, um eine JSON-Zeichenkette in ein JSON-Objekt zu konvertieren, damit sie programmatisch bearbeitet werden kann. Die übergebene Zeichenkette muss eine gültige JSON-Zeichenkette sein, andernfalls wird eine Ausnahme ausgelöst. Diese Zeichenkette kann von jedem Webdienst oder jeder Remote-Anwendung empfangen werden.

Diese Methode akzeptiert zwei Parameter: eine Zeichenkette und eine Callback-Funktion, mit der die Zeichenkette vor der Konvertierung in ein Objekt bearbeitet werden kann. Angenommen, wir empfangen eine Nachricht von einem Webdienst, die den Status der Aktion, die Nachricht und den Statuscode angibt. Unten finden Sie ein einfaches Beispiel dafür, wie eine Zeichenkette in ein Objekt konvertiert werden kann.

Code:

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)

Ausgabe:

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

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

Ein häufiges Problem ist, wenn der Zeichenkette nachgestellte Kommas hinzugefügt werden, sodass JSON.parse() einen Fehler auswirft, wenn die an sie übergebene Zeichenkette nachgestellte Kommas enthält. Wenn Sie die Werte bearbeiten müssen, können Sie die Callback-Funktion als zweites Argument übergeben.

Code:

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)

Ausgabe:

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

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

JSON.stringify()

Die stringify-Methode macht genau das Gegenteil der parse-Methode. Hier wird das JSON-Objekt übergeben, und der Rückgabewert ist eine Zeichenkette. Diese Zeichenkette kann beispielsweise an einen anderen Remote-Webdienst übergeben und dann zur Bearbeitung wieder in ein JSON-Objekt geparst werden.

Code:

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);

Ausgabe:

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

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

Die stringify-Methode kann zwei Argumente annehmen: replacerund spacer-Methoden. Die replacer-Methode kann verwendet werden, um Werte in der Zeichenkette zu ersetzen oder auszuschließen.

Code:

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)

Ausgabe:

{"message":"Erfolgreich abgeschlossen","status":200,"code":200}

1	{"message":"Erfolgreich abgeschlossen","status":200,"code":200}

Wenn das spacer-Argument angegeben wird, wird jedes Element eines Arrays oder Objekts in einer eigenen Zeile platziert und eingerückt, um seine Tiefe in der Hierarchie der Objekte und Arrays anzuzeigen. Unten finden Sie einen einfachen Code-Ausschnitt, der dies veranschaulicht.

Code:

let obj = {message:"Erfolgreich abgeschlossen", status:200, code:200}
let str = JSON.stringify(obj, null, "---");
console.log(str)

let obj = {message:"Erfolgreich abgeschlossen", status:200, code:200}

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

console.log(str)

Ausgabe:

{
---"message": "Erfolgreich abgeschlossen",
---"status": 200,
---"code": 200
}

{

---"message": "Erfolgreich abgeschlossen",

---"status": 200,

---"code": 200

}

Fazit

In diesem Tutorial haben wir uns zwei hilfreiche Methoden für die Arbeit mit JSON-formatierten Inhalten angesehen. JSON-Objekte sind allgegenwärtig, und bei der Entwicklung moderner Anwendungen mit JavaScript sind diese Methoden sehr nützlich. Um mehr zu erfahren, lesen Sie die folgenden Tutorials auf unserem Blog:

Viel Spaß beim Programmieren!

Hark Labs

Autor · CloudSigma

Preslav Dobrev ist ein kreativer Designer bei CloudSigma und konzentriert sich auf eine konsistente Unternehmensidentität durch traditionelle und innovative Marketingkanäle. Er versteht es meisterhaft, künstlerische Vision mit strategischem Marketing zu verbinden, um wirkungsvolle Markengeschichten zu schaffen.

Ein Tutorial über die Arbeit mit JSON.parse() und JSON.stringify()

JSON.parse()

JSON.stringify()

Fazit

Hark Labs

Kommentare