JSON.stringify und JSON.parse

Die JSON-Methoden stringify () und parse () wandeln Javascript-Objekte in einen JSON-formatierten String um bzw. JSON-formatierte Strings in ein Objekt.

Und weil Arrays Objekte sind, können parse und stringify auch bei Arrays verwendet werden.

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

JSON.stringify

Wenn Daten an den Server gesendet werden, müssen sie als String gesendet werden. JSON.stringify () konvertiert Daten in eine JSON-formatierte Zeichenkette und wird vor allem benutzt, um Javascript-Objekte zu versenden oder im WebStorage zu speichern.

const Color = {
	number : 207,
	lightness : 44,
	saturation : 50,
	name : "steelblue",
	kombi : function (elem) {
		elem.style = "background-color: hsl(" + this.number + "," + this.saturation + "%," + this.lightness + "%)";
	}
}

const myObjectString = JSON.stringify (color);

console.log (myObjectString);
console.log (JSON.parse (myObjectString));
// string (Keys in Hochkommas) {"number":207,"lightness":44,"saturation":50,"name":"steelblue"} // object (Keys nicht in Hochkommas) {number: 207, lightness: 44, saturation: 50, name: "steelblue"}

Nach dem Stringify sind die Schlüssel des Objekts zu Strings geworden. Die Werte wurden allerdings entsprechend ihres Typs verarbeitet. number, lightness und saturation sind weiterhin vom Typ number. Ebenso würde Boolean den ursprünglichen Datentyp behalten und weiterhin false oder true sein.

Stringify replacer und space

JSON.stringify kann mit zwei optionalen Parametern aufgerufen werden.

JSON.stringify (value, replacer, space);
value
das Objekt, das in einen String konvertiert werden soll
replacer (optional)
kann vor dem Stringify Änderungen am Objekt durchführen
space (optional)
dient nur der besseren Lesbarkeit und ist entweder eine Zahl oder ein String.

replacer kann eine Funktion oder ein Array sein.

Replacer-Funktion und 4 Leerzeichen vor jeder Zeile
const Color = {
	number : 207,
	lightness : 44,
	saturation : 50,
	name : "steelblue",
	kombi : function (elem) {
		elem.style = "background-color: hsl(" + this.number + "," + this.saturation + "%," + this.lightness + "%)";
	}
}

const newString = JSON.stringify (Color, (key, value) => {
	if (typeof value === "function") {
		return value.toString();
	}
	return value;
}, 4);

console.log (newString);
{
    "number": 207,
    "lightness": 44,
    "saturation": 50,
    "name": "steelblue",
    "kombi": "function (elem) {\n\t\telem.style = \"background-color: hsl(\" + this.number + \",\" + this.saturation + \"%,\" + this.lightness + \"%)\";\n\t}"
}

Ist space eine Zahl, steht space für die Zahl der Blanks am Anfang einer Zeile der JSON-Ausgabe. 0 ist das Minimum, 10 ist das Maximum, jeder größere Zahl wird als 10 interpretiert.

Ist space ein String (mit bis zu 10 Zeichen), werden die Zeichen an den Anfang jeder Zeile gesetzt.

Wird ein Array als replacer eingesetzt, steuert das Array, welche Keys in Strings umgewandelt werden. Hier nur number und name.

const aString = JSON.stringify (Color, ["number","name"]);
console.log (aString)
{"number":207,"name":"steelblue"}

JSON.parse

JSON.parse wandelt den String zurück in ein Objekt.

Auch parse hat ein zweites optionales Argument – reviver – von JSON.parse () kann eine Funktion sein, die das Objekt ändert, bevor sie zurückgegeben wird.

reviver prüft jede Eigenschaft, bevor der Wert zurückgegeben wird.

const Person = {
	name : "David",
	lastVisit : "14.2.2021",
	ort : "Vluyn"
};

const myPersonString = JSON.stringify (Person);


const obj = JSON.parse (myPersonString, function (key, value) {
	if (key == "lastVisit") {
		return "18.8.2021";
	} else {
		return value;
	}
})

document.querySelector(".result").innerHTML = obj.name + ", " + obj.lastVisit;

Funktionen sind in JSON nicht erlaubt – eine Funktion müsste als String eingesetzt werden und mit eval() transformiert werden. Aber eval () ist böse und verdammt.