JSON.stringify und JSON.parse

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: hsl(${this.number}, ${this.saturation}%, ${this.lightness}%)`;
	}
}

const myObjectString = JSON.stringify (Color);

console.log (myObjectString);
console.log (JSON.parse (myObjectString));

myObjectString"{\"number\":207,\"lightness\":44,\"saturation\":50,\"name\":\"steelblue\"}"
{number: 207, lightness: 44, saturation: 50, name: "steelblue"}

Nach dem Stringify ist die vollständige Struktur zu einem String 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.

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-Ausgaben verschönern

Der zweite Parameter von JSON.stringify wird als replacer bezeichnet, denn er ersetzt Elemente des Ergebnisses und pickt sich nur die gewünschten Elemente heraus.

const farben = { Kreuz: '♣', Pik: '♠', Karo: '♦', Herz: '♥' };
console.log (JSON.stringify(farben, ['Kreuz','Herz'], 4));

{
   "Kreuz": "♣",
   "Herz": "♥"
}

Der dritte Parameter steuert den Zeilenumbruch.

Statt die Ausgabe in eine laaaannnngggeee Zeile zu setzen, gibts eine übersichtlichere Ausgabe.

const farben = { Kreuz: '♣', Pik: '♠', Karo: '♦', Herz: '♥' };
console.log (JSON.stringify(farben, null, '\t'));

{
	"Kreuz": "♣",
	"Pik": "♠",
	"Karo": "♦",
	"Herz": "♥"
}

\t rückt neue Zeilen einen Tabulator breit ein. Ziffern von 1 bis 10 liefern ebensoviele Leerzeichen.

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.