Konvertieren von JavaScript-Objekten in JSON

1. Anzeigen von JavaScript-Objekten mit console.log(jsObject)
2. Verwenden von JSON.stringify() zum Konvertieren eines JSON-Objekts in einen String
3. Verwenden von benutzerdefiniertem Code zum Konvertieren von JavaScript-Objekten in JSON
4. Ein JavaScript-Objekt aus einem JSON-String zurückholen

JSON ist ein häufig verwendetes Datenübertragungsformat zur Darstellung von Objekten in Javascript. Wir verwenden das JSON-Format als Standardformat in den meisten Client-Server-Kommunikationen zum Übertragen von Daten. Die JSON-Notation ist einfach zu verwenden und zu interpretieren, da es sich um ein von Menschen lesbares Format eines JavaScript-Objekts handelt. Es ist einfach, ein Javascript-Objekt in ein JSON-Format zu konvertieren. Wir können es wie folgt umwandeln.

Anzeigen von JavaScript-Objekten mit console.log(jsObject)

Die Funktion console.log dient dazu, Meldungen an die Webkonsole auszugeben. Wir können die Nachrichten mit den Entwicklertools eines Webbrowsers anzeigen. Die Funktion conosle.log() akzeptiert ein Objekt, eine Nachricht und sogar Teilstrings. Daher ist es am besten geeignet, um das Aussehen eines JavaScript-Objekts zu verstehen. Wenn wir eine Variable mit einem Objekt console.log, erhalten wir seine visuelle JSON-Darstellung. Der folgende Code zeigt die Darstellung eines Javascript-Objekts mit dem console.log.

var a = {};
a.id = 1;
a.name = 'icy-cream';
a.flavor = 'vanilla';
console.log(a);

Ausgabe:

{id: 1, name: "icy-cream", flavor: "vanilla"}

Im obigen Code gibt console.log(a) das JSON-Format des Objekts a aus. Wir erhalten für das Javascript-Objekt in allen Browsern die gleiche JSON-Darstellung, da conosle.log() auf allen Browsern unterstützt wird, inklusive dem unfreundlichen Internet Explorer. Durch die Option console.log() können wir nur die JSON-Darstellung eines Objekts anzeigen und dürfen sie nicht bearbeiten oder für andere programmgesteuerte Datenverarbeitung verwenden, außer sie nur in der Webkonsole anzuzeigen.

Verwenden von JSON.stringify() zum Konvertieren eines JSON-Objekts in einen String

Eine andere Möglichkeit, die JSON-Darstellung für ein Javascript-Objekt zu erhalten, ist die Verwendung der Methode JSON.stringify(). Wir können das JSON-Format eines JavaScript-Objekts verwenden und es mit der Methode JSON.stringify() Variablen zuweisen. JSON.stringify() konvertiert das Javascript-Objekt und gibt den JSON-Wert für das Objekt als String-Daten zurück.

Syntax

JSON.stringify(<JSObject>)

Parameter

Die Funktion nimmt das JavaScript-Objekt als Parameter, akzeptiert eine replacer-Funktion und space count als optionale Parameter.

• Als ersten Parameter der Funktion JSON.stringify() geben wir unser JavaScript-Zielobjekt zum Konvertieren in JSON an.
• Wir verwenden die Funktion replacer, um das JSON-Objekt zu ändern. Damit können wir die Attribute angeben, die wir aus dem Objekt herausfiltern möchten, bevor wir es in ein JSON-Format konvertieren.
• Der Parameter space count ist ein numerischer oder ein String-Wert, der die Anzahl der Leerzeichen angibt, die in den ausgegebenen JSON-String eingefügt werden müssen, um ihn in ein lesbares Format zu bringen.

Rückgabewert

JSON.stringify() gibt das String-JSON-Format des JavaScript-Objekts zurück.

Verwendungszweck

Lassen Sie uns dasselbe Objekt verwenden, das wir im vorherigen Abschnitt verwendet haben. Diesmal werden wir es jedoch mit JSON.stringify() in einen JSON-String umwandeln. Siehe den folgenden Code.

var a = {};
a.id = 1;
a.name = 'icy-cream';
a.flavor = 'vanilla';
console.log(JSON.stringify(a));
console.log(JSON.stringify(a, null, 0));
console.log(JSON.stringify(a, null, 5));

Ausgabe:

{"id":1,"name":"icy-cream","flavor":"vanilla"}
{"id":1,"name":"icy-cream","flavor":"vanilla"}
{
     "id": 1,
     "name": "icy-cream",
     "flavor": "vanilla"
}

Mit einer Zahl im dritten Parameter der Funktion JSON.stringify() erhalten wir als Ausgabe einen besser lesbaren JSON-String. Die Methode formatiert den JSON, indem sie die angegebene Anzahl von Leerzeichen vor jedem Schlüssel-Wert-Paar des JSON hinzufügt. Beispielsweise wird in JSON.stringify(a, null, 5) der Parameter id des Objekts a nach fünf Leerzeichen platziert.

Verwenden von benutzerdefiniertem Code zum Konvertieren von JavaScript-Objekten in JSON

Wenn wir unseren Code zur Konvertierung des JavaScript-Objekts in ein JSON-Format schreiben wollen, müssen wir die Funktion Object.keys() verwenden. Object.keys() ist eine Javascript-Methode, die die Schlüssel eines Objekts extrahiert und ein Array mit den Schlüsseln zurückgibt. Daher kombinieren wir mit unserem benutzerdefinierten Code die Schlüssel und die Werte des Javascript-Objekts und fassen sie in die geschweiften {}-Klammern ein, um die JSON-Darstellung des Javascript-Objekts zu erhalten. Schauen wir uns den Code unten an.

var a = {};
a.id = 1;
a.name = 'icy-cream';
a.flavor = 'vanilla';
var keys = Object.keys(a);
var JSONOut = '{';
for (let i = 0; i < keys.length; i++) {
  JSONOut = JSONOut + `"${keys[i]}":"${a[keys[i]]}",`;
}
JSONOut = JSONOut + '}';
console.log(JSONOut);

Ausgabe:

{"id":"1","name":"icy-cream","flavor":"vanilla",}

Ein JavaScript-Objekt aus einem JSON-String zurückholen

In den meisten Webanwendungen speichern wir die Javascript-Objekte als JSON-String in der Datenbank, damit sie später problemlos zum Rendern derselben Benutzeroberfläche verwendet werden können. Wir können den JSON in der Datenbank als JSON String speichern. Wie erhalten wir das JSON oder das JavaScript-Objekt zurück, das der JSON-Zeichenkette entspricht, die mithilfe einer REST-API aus der Datenbank gezogen wurde? JavaScript verfügt über die Methode JSON.parse(), um das JSON wieder in ein JavaScript-Objekt zu konvertieren. Siehe den folgenden Code.

var response = `{
     "id": 1,
     "name": "icy-cream",
     "flavor": "vanilla"
}`
console.log(JSON.parse(response));
var a = JSON.parse(response);
a.id = 20;
console.log(a);

Ausgabe:

{id: 1, name: "icy-cream", flavor: "vanilla"}
{id: 20, name: "icy-cream", flavor: "vanilla"}

Mit dem obigen Code haben wir den JSON-String durch die Methode JSON.parse() wieder in ein Javascript-Objekt umgewandelt und einer Variablen zugewiesen. Das Ändern des Wertes des id-Attributs desselben Javascript-Objekts ändert auch den Attributwert. Daher können wir die Zeichenkette JSON in ein gültiges Javascript-Objekt konvertieren, das wir programmgesteuert im Code verarbeiten können. Beachten Sie, dass wir das Tilde-Zeichen verwenden können, um eine Zeichenkette mit mehreren Zeilenumbrüchen zu akzeptieren.