Konvertieren von JavaScript-Objekten in JSON
-
Anzeigen von JavaScript-Objekten mit
console.log(jsObject)
-
Verwenden von
JSON.stringify()
zum Konvertieren eines JSON-Objekts in einen String - Verwenden von benutzerdefiniertem Code zum Konvertieren von JavaScript-Objekten in JSON
-
Ein JavaScript-Objekt aus einem
JSON
-String zurückholen
![Konvertieren von JavaScript-Objekten in JSON](/img/JavaScript/feature-image---javascript-object-to-json.webp)
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 einJSON
-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.
Verwandter Artikel - JavaScript Object
- Objekte aus einem Array in JavaScript suchen
- Holen Sie sich den Wert des Objekts durch eine Referenz auf den Schlüssel
- JavaScript-Objekt zerstören
- Objekt im Array nach Eigenschaftswert in JavaScript suchen
- Objekte in JavaScript drucken
- Sortieren Array von Objekten nach einzelnen Schlüssel mit Datum Wert
Verwandter Artikel - JavaScript JSON
- Formatiere JSON in JavaScript
- Generieren Sie formatiertes und leicht lesbares JSON in JavaScript
- Konvertieren Sie XML in JavaScript in JSON
- Überprüfen Sie, ob ein String ein gültiger JSON-String in JavaScript ist
- Konvertieren das JSON-Objekt in ein JavaScript-Array
- Holen Sie sich JSON von URL in JavaScript