Beispiele für JSON-Objekte: Erklärte Stringify- und Parse-Methoden

JSON Stringify

Die JSON.stringify()Methode konvertiert einen JSON-sicheren JavaScript-Wert in eine JSON-kompatible Zeichenfolge.

Was sind JSON-sichere Werte? Lassen Sie uns eine Liste aller JSON-unsicheren Werte erstellen, und alles, was nicht in der Liste enthalten ist, kann als JSON-sicher angesehen werden.

JSON-unsichere Werte:

  • undefined
  • function(){}
  • (ES6 +) Symbol
  • Ein Objekt mit Zirkelverweis (en)

Syntax

 JSON.stringify( value [, replacer [, space]])

In seiner einfachsten und am häufigsten verwendeten Form:

 JSON.stringify( value )

Parameter

value : Der JavaScript-Wert, der 'stringifiziert' werden soll.

replacer : (Optional) Eine Funktion oder ein Array, das als Filter für Eigenschaften des Wertobjekts dient, das in die JSON-Zeichenfolge aufgenommen werden soll.

space: (Optional) Ein numerischer Wert oder ein Zeichenfolgenwert, um die JSON-Zeichenfolge einzurücken. Wenn ein numerischer Wert angegeben wird, dienen so viele Leerzeichen (bis zu 10) auf jeder Ebene als Einrückung. Wenn ein Zeichenfolgenwert angegeben wird, fungiert diese Zeichenfolge (bis zu den ersten 10 Zeichen) auf jeder Ebene als Einrückung.

Rückgabetyp

Der Rückgabetyp der Methode lautet : string.

Beschreibung

Die JSON-sicheren Werte werden in die entsprechende JSON-Zeichenfolgenform konvertiert. Die JSON-unsicheren Werte geben dagegen Folgendes zurück:

  • undefined wenn sie als Werte an die Methode übergeben werden
  • null wenn sie als Array-Element übergeben werden
  • nichts, wenn es als Eigenschaften für ein Objekt übergeben wird
  • löst einen Fehler aus, wenn es sich um ein Objekt mit Zirkelverweisen handelt.
 //JSON-safe values JSON.stringify({}); // '{}' JSON.stringify(true); // 'true' JSON.stringify('foo'); // '"foo"' JSON.stringify([1, 'false', false]); // '[1,"false",false]' JSON.stringify({ x: 5 }); // '{"x":5}' JSON.stringify(new Date(2006, 0, 2, 15, 4, 5)) // '"2006-01-02T15:04:05.000Z"' //JSON-unsafe values passed as values to the method JSON.stringify( undefined ); // undefined JSON.stringify( function(){} ); // undefined //JSON-unsafe values passed as array elements JSON.stringify({ x: [10, undefined, function(){}, Symbol('')] }); // '{"x":[10,null,null,null]}' //JSON-unsafe values passed as properties on a object JSON.stringify({ x: undefined, y: Object, z: Symbol('') }); // '{}' //JSON-unsafe object with circular reference on it var o = { }, a = { b: 42, c: o, d: function(){} }; // create a circular reference inside `a` o.e = a; // would throw an error on the circular reference // JSON.stringify( a );

JSON.stringify(...)verhält sich anders, wenn für ein übergebenes Objekt eine toJSON()Methode definiert ist. Der Rückgabewert der toJSON()Methode wird anstelle des Objekts selbst serialisiert.

Dies ist besonders praktisch, wenn ein Objekt einen unzulässigen JSON-Wert enthält.

 //JSON-unsafe values passed as properties on a object var obj = { x: undefined, y: Object, z: Symbol('') }; //JSON.stringify(obj); logs '{}' obj.toJSON = function(){ return { x:"undefined", y: "Function", z:"Symbol" } } JSON.stringify(obj); //"{"x":"undefined","y":"Function","z":"Symbol"}" //JSON-unsafe object with circular reference on it var o = { }, a = { b: 42, c: o, d: function(){} }; // create a circular reference inside `a` o.e = a; // would throw an error on the circular reference // JSON.stringify( a ); // define a custom JSON value serialization a.toJSON = function() { // only include the `b` property for serialization return { b: this.b }; }; JSON.stringify( a ); // "{"b":42}"

Das replacer

Die replacer, wie bereits erwähnt, ist ein Filter, der anzeigt , welche Eigenschaften in der JSON String enthalten sein. Es kann entweder ein Array oder eine Funktion sein. Bei einem Array enthält der Ersetzer nur die Zeichenfolgendarstellungen der Eigenschaften, die in der JSON-Zeichenfolge enthalten sein sollen.

 var foo = {foundation: 'Mozilla', model: 'box', week: 45, transport: 'car', month: 7}; JSON.stringify(foo, ['week', 'month']); // '{"week":45,"month":7}', only keep "week" and "month" properties

Wenn replaceres sich um eine Funktion handelt, wird sie einmal für das Objekt selbst und dann einmal für jede Eigenschaft im Objekt aufgerufen, und jedes Mal werden zwei Argumente übergeben, Schlüssel und Wert . Um einen Schlüssel in der Serialisierung zu überspringen , undefinedsollte zurückgegeben werden. Andernfalls sollte der angegebene Wert zurückgegeben werden. Wenn einer dieser Werte selbst Objekte sind, replacerserialisiert die Funktion sie auch rekursiv.

 function replacer(key, value) { // Filtering out properties if (typeof value === 'string') { return undefined; } return value; } var foo = {foundation: 'Mozilla', model: 'box', week: 45, transport: 'car', month: 7}; JSON.stringify(foo, replacer); // '{"week":45,"month":7}'

Wenn ein Array zu übergeben wird , JSON.stringify()und replacerkehrt undefinedzu einem seiner Elemente, ist das Element , das mit Wert ersetzt null. replacerFunktionen können keine Werte aus einem Array entfernen.

 function replacer(key, value) { // Filtering out properties if (typeof value === 'string') { return undefined; } return value; } var foo = ['Mozilla', 'box', 45, 'car', 7]; JSON.stringify(foo, replacer); // "[null,null,45,null,7]"

Das space

Der spacezum Einrücken verwendete Parameter macht das Ergebnis JSON.stringify()schöner.

 var a = { b: 42, c: "42", d: [1,2,3] }; JSON.stringify( a, null, 3 ); // "{ // "b": 42, // "c": "42", // "d": [ // 1, // 2, // 3 // ] // }" JSON.stringify( a, null, "-----" ); // "{ // -----"b": 42, // -----"c": "42", // -----"d": [ // ----------1, // ----------2, // ----------3 // -----] // }"

JSON Parse

Die JSON.parse()Methode analysiert eine Zeichenfolge und erstellt ein neues Objekt, das durch eine Zeichenfolge beschrieben wird.

Syntax:

 JSON.parse(text [, reviver])

Parameter:

text Die Zeichenfolge, die als JSON analysiert werden soll

reviver(Optional) Die Funktion empfängt keyund valueals Argumente. Mit dieser Funktion kann der Ergebniswert transformiert werden.

Hier ist ein Beispiel für die Verwendung JSON.parse():

var data = '{"foo": "bar"}'; console.log(data.foo); // This will print `undefined` since `data` is of type string and has no property named as `foo` // You can use JSON.parse to create a new JSON object from the given string var convertedData = JSON.parse(data); console.log(convertedData.foo); // This will print `bar

Repl.it Demo

Hier ist ein Beispiel mit reviver:

var data = '{"value": 5}'; var result = JSON.parse(data, function(key, value) { if (typeof value === 'number') { return value * 10; } return value; }); // Original Data console.log("Original Data:", data); // This will print Original Data: {"value": 5} // Result after parsing console.log("Parsed Result: ", result); // This will print Parsed Result: { value: 50 }

Im obigen Beispiel werden alle numerischen Werte mit 10- Repl.it Demo multipliziert

Weitere Informationen zu JSON:

  • JSON-Syntax
  • Verwandeln Sie Ihre Website in eine mobile App mit 7 Zeilen JSON