diff options
Diffstat (limited to 'files/de/web/javascript/reference/global_objects/json')
3 files changed, 593 insertions, 0 deletions
diff --git a/files/de/web/javascript/reference/global_objects/json/index.html b/files/de/web/javascript/reference/global_objects/json/index.html new file mode 100644 index 0000000000..e52af893a1 --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/json/index.html @@ -0,0 +1,155 @@ +--- +title: JSON +slug: Web/JavaScript/Reference/Global_Objects/JSON +tags: + - JSON + - JavaScript + - Object + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/JSON +--- +<div>{{JSRef}}</div> + +<p>Das <strong><code>JSON</code></strong> Objekt enthält Methoden für das Einlesen und Konvertieren der <a class="external" href="https://json.org/">JavaScript Objekt Notation</a> ({{glossary("JSON")}}) in JavaScript und umgekehrt. Es kann nicht aufgerufen oder erstellt werden. Außer seinen zwei Methoden hat das Objekt keine interessante Funktionalität.</p> + +<h2 id="Beschreibung">Beschreibung</h2> + +<h3 id="JavaScript_Objekt_Notation">JavaScript Objekt Notation</h3> + +<p>JSON ist eine Syntax für das Serialisieren von Objekten, Arrays, Nummern, Strings, Wahrheitswerten und {{jsxref("null")}}. JSON basiert auf der JavaScript Syntax, jedoch ist sie leicht unterschiedlich: Manches JavaScript ist kein JSON und manches JSON ist kein JavaScript. Für mehr Informationen Siehe in dem Artikel <a href="http://timelessrepo.com/json-isnt-a-javascript-subset">JSON: The JavaScript subset that isn't</a>.</p> + +<table> + <caption>JavaScript und JSON Unterschiede</caption> + <thead> + <tr> + <th scope="col">JavaScript Typen</th> + <th scope="col">JSON Unterschiede</th> + </tr> + </thead> + <tbody> + <tr> + <td>Objekte und Arrays</td> + <td>Namen von Eigenschaften müssen als Strings in Doppelten Anführungszeichen (") geschrieben werden; Angefügte Kommas sind verboten.</td> + </tr> + <tr> + <td>Zahlen</td> + <td>Führende Nullen sind verboten (JSON.stringify ignoriert diese Nullen, jedoch wirft JSON.parse einen SyntaxError); Nach einem Dezimalpunkt muss mindestens eine Ziffer folgen.</td> + </tr> + <tr> + <td>Strings</td> + <td> + <p>Nur eine begrenzte Menge von Zeichen muss maskiert werden; Einige Kontrollzeichen sind verboten; Die Unicodezeichen Zeilenumbruch (<a href="http://unicode-table.com/en/2028/">U+2028</a>) und Paragraphenumbruch (<a href="http://unicode-table.com/en/2029/">U+2029</a>) sind erlaubt; Strings müssen in Doppelten Anführungszeichen (") geschrieben werden. Das folgenden Beispiel zeigt eine Situation in der {{jsxref("JSON.parse()")}} funktioniert, aber das Ausführen durch JavaScript zu einem {{jsxref("SyntaxError")}} führt:</p> + + <pre class="brush: js"> +var code = '"\u2028\u2029"'; +JSON.parse(code); // funktioniert +eval(code); // Error +</pre> + </td> + </tr> + </tbody> +</table> + +<p>Nachfolgend ist die komplette JSON Syntax zu sehen:</p> + +<pre class="brush: js">JSON = null + or true or false + or JSONNumber + or JSONString + or JSONObject + or JSONArray + +JSONNumber = - PositiveNumber + or PositiveNumber +PositiveNumber = DecimalNumber + or DecimalNumber . Digits + or DecimalNumber . Digits ExponentPart + or DecimalNumber ExponentPart +DecimalNumber = 0 + or OneToNine Digits +ExponentPart = e Exponent + or E Exponent +Exponent = Digits + or + Digits + or - Digits +Digits = Digit + or Digits Digit +Digit = 0 through 9 +OneToNine = 1 through 9 + +JSONString = "" + or " StringCharacters " +StringCharacters = StringCharacter + or StringCharacters StringCharacter +StringCharacter = any character + except " or \ or U+0000 through U+001F + or EscapeSequence +EscapeSequence = \" or \/ or \\ or \b or \f or \n or \r or \t + or \u HexDigit HexDigit HexDigit HexDigit +HexDigit = 0 through 9 + or A through F + or a through f + +JSONObject = { } + or { Members } +Members = JSONString : JSON + or Members , JSONString : JSON + +JSONArray = [ ] + or [ ArrayElements ] +ArrayElements = JSON + or ArrayElements , JSON</pre> + +<p>Unbedeutende Whitespaces können überall eingebaut werden außer in eine <code><var>JSONNumber</var></code> (Nummern dürfen keine Whitespaces enthalten) und einen <code><var>JSONString</var></code> (In dem wird es als das entsprechende Whitespace interpretiert oder führt zu einem Fehler). Das Tab-Zeichen (<a href="http://unicode-table.com/en/0009/">U+0009</a>), "carriage return"-Zeichen (<a href="http://unicode-table.com/en/000D/">U+000D</a>), "line feed"-Zeichen (<a href="http://unicode-table.com/en/000A/">U+000A</a>) und Leerzeichen (<a href="http://unicode-table.com/en/0020/">U+0020</a>) sind die einzigen erlaubten Whitespace-Zeichen.</p> + +<h2 id="Methoden">Methoden</h2> + +<dl> + <dt>{{jsxref("JSON.parse()")}}</dt> + <dd>Liest einen String als JSON ein. Optional werden die Werte und die Eigenschaften Transformiert und zurückgegeben.</dd> + <dt>{{jsxref("JSON.stringify()")}}</dt> + <dd>Gibt ein JSON-String eines übergebenen Wertes zurück. Optional können nur bestimmte Eigenschaften zum JSON hinzugefügt werden oder Eigenschaften werden Ersetzt. Dieses wird durch eine Benutzerdefinierte Methode durchgeführt.</dd> +</dl> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.12', 'JSON')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initiale Definition.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-json-object', 'JSON')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-json-object', 'JSON')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> +<div> + + +<p>{{Compat("javascript.builtins.JSON")}}</p> +</div> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Date.prototype.toJSON()")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/json/parse/index.html b/files/de/web/javascript/reference/global_objects/json/parse/index.html new file mode 100644 index 0000000000..b8442eb38d --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/json/parse/index.html @@ -0,0 +1,128 @@ +--- +title: JSON.parse() +slug: Web/JavaScript/Reference/Global_Objects/JSON/parse +tags: + - ECMAScript5 + - JSON + - JavaScript + - Method + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/JSON/parse +--- +<div>{{JSRef}}</div> + +<p>Die Methode <strong><code>JSON.parse()</code></strong> erzeugt aus einem JSON-formatierten Text ein entsprechendes Javascript-Objekt. Der optionale <strong>reviver</strong>-Parameter kann die Umwandlung im Detail beeinflussen.</p> + +<div>{{EmbedInteractiveExample("pages/js/json-parse.html")}}</div> + + + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox">JSON.parse(<var>text</var>[, <var>reviver</var>])</pre> + +<h3 id="Parameters" name="Parameters">Parameter</h3> + +<dl> + <dt><code>text</code></dt> + <dd>JSON-formatierter Text, der eingelesen werden soll. Siehe {{jsxref("JSON")}} für eine Beschreibung der JavaScript Objekt Notation.</dd> + <dt><code>reviver</code> {{optional_inline}}</dt> + <dd> + <p><span id="result_box" lang="de"><span>Wenn es sich um eine Funktion handelt, schreibt diese vor, wie der ursprünglich vom Parsen erzeugte Wert transformiert wird, bevor er zurückgegeben wird.</span></span></p> + </dd> +</dl> + +<h3 id="Returns" name="Returns">Rückgabewert</h3> + +<p>Die Funktion gibt das aus <code>text</code> erzeugte {{jsxref("Object")}} zurück.</p> + +<h3 id="Throws" name="Throws">Ausnahmen</h3> + +<p>{{jsxref("SyntaxError")}}, falls <code>text</code> kein gültiges JSON enthält.</p> + +<h2 id="Examples" name="Examples">Beispiele</h2> + +<h3 id="Example:_Using_JSON.parse" name="Example:_Using_JSON.parse"><code>JSON.parse()</code> verwenden</h3> + +<pre>JSON.parse('{}'); // {} +JSON.parse('true'); // true +JSON.parse('"foo"'); // "foo" +JSON.parse('[1, 5, "false"]'); // [1, 5, "false"] +JSON.parse('null'); // null +</pre> + +<h3 id="Example:_Using_the_reviver_parameter" name="Example:_Using_the_reviver_parameter">Verwendung des <code>reviver</code>-Parameters</h3> + +<p>Wenn <code>reviver</code> spezifiziert ist, wird der vom Parser berechnete Wert vor der Rückgabe Transformiert. Insbesondere der berechnete Wert und alle seine EIgenschaften (beginnend mit dem am tiefsten geschachtelten Eigenschaft bis hin zum originalen Wert selbst) werden separat mit dem <code>reviver</code> Ausgeführt.<span id="result_box" lang="de"><span> Dann wird sie aufgerufen, wobei das Objekt, das die Eigenschaft enthält, als <code>this</code> und der Eigenschaftsname als Zeichenfolge und der Eigenschaftswert als Argumente verarbeitet werden.</span></span> Wenn <code>reviver</code> {{jsxref("undefined")}} zurück gibt (oder keinen Wert zurück gibt, wenn zum Beispiel die Ausführung der Funktion fehlschlägt), wird die Eigenschaft aus dem Ergebnis entfernt. Anderenfalls wird dessen Wert in den Rückgabewert neu definiert.</p> + +<p>Falls <code>reviver</code> nur einige Werte ändert, muss sichergestellt sein, dass die unveränderten Werte auch zurückgegeben werden, ansonsten werden diese Werte aus dem Ergebnis gelöscht.</p> + +<pre class="brush: js">JSON.parse('{"p": 5}', (key, value) => + typeof value === 'number' + ? value * 2 // Gibt value * 2 für Zahlen zurück. + : value // Alle anderen Werte werden unverändert zurückgegeben. +); + +// { p: 10 } + +JSON.parse('{"1": 1, "2": 2, "3": {"4": 4, "5": {"6": 6}}}', (key, value) => { + console.log(key); // Loggt die Namen der Eigenschaften, der letzte ist "". + return value; // Gib den unveränderten Eigenschaftenwert zurück. +}); + +// 1 +// 2 +// 4 +// 6 +// 5 +// 3 +// "" +</pre> + +<h3 id="JSON.parse()_erlaubt_keine_abschließenden_Kommas"><code>JSON.parse()</code> erlaubt keine abschließenden Kommas</h3> + +<pre class="example-bad brush: js">// Beides erzeugt einen Syntaxfehler +JSON.parse("[1, 2, 3, 4, ]"); +JSON.parse("{ \"foo\" : 1, }"); +</pre> + +<h2 id="Specifications" name="Specifications">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.12.2', 'JSON.parse')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initiale Definition. Implementiert in JavaScript 1.7.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-json.parse', 'JSON.parse')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-json.parse', 'JSON.parse')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.JSON.parse")}}</p> +</div> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li>{{jsxref("JSON.stringify()")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/json/stringify/index.html b/files/de/web/javascript/reference/global_objects/json/stringify/index.html new file mode 100644 index 0000000000..1acea5bbd3 --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/json/stringify/index.html @@ -0,0 +1,310 @@ +--- +title: JSON.stringify() +slug: Web/JavaScript/Reference/Global_Objects/JSON/stringify +tags: + - JSON + - JavaScript + - Method + - Reference + - stringify +translation_of: Web/JavaScript/Reference/Global_Objects/JSON/stringify +--- +<div>{{JSRef}}</div> + +<p>Die <strong><code>JSON.stringify()</code></strong> Methode konvertiert einen JavaScript-Wert in einen JSON-String. Optional werden Werte ersetzt, wenn eine Ersetzungsfunktion angegeben ist. Optional werden nur die angegebenen Eigenschaften einbezogen, wenn ein Ersetzungsarray angegeben ist.</p> + +<div>{{EmbedInteractiveExample("pages/js/json-stringify.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>JSON.stringify(<var>value</var>[, <var>replacer</var>[, <var>space</var>]])</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>value</code></dt> + <dd>Der Wert, der zu einem JSON-String konvertiert werden soll.</dd> + <dt><code>replacer</code> {{optional_inline}}</dt> + <dd>Eine Funktion, die das Verhalten des String- Erstellungsprozesses verändert, oder ein Array von {{jsxref("String")}} und {{jsxref("Number")}} Objekten, die als Whiteliste für die Selektion von Eigenschaften des <code>value</code> Objektes fungiert, um nur bestimmte Eigenschaften im JSON-String aufzunehmen. Wenn dieser Parameter null ist oder nicht unterstützt wird, werden alle Eigenschaften des Objektes im JSON-String aufgenommen.</dd> + <dt><code>space</code> {{optional_inline}}</dt> + <dd>Ein {{jsxref("String")}} oder {{jsxref("Number")}} Objekt, welches eingesetzt wird, um Whitespaces in den JSON-String für die Lesbarkeit hinzuzufügen. Wenn eine <code>Number</code> angegeben ist, bedeutet dies, dass die angegebene Anzahl an Leerzeichen hinzugefügt werden; Die Anzahl der Leerzeichen ist hierbei auf 10 begrenzt und wird bei einer größeren Anzahl auf 10 gesetzt. Werte kleiner als 1 bedeuten, dass keine Leerzeichen verwendet werden sollen. Wenn ein <code>String</code> angegeben wird, wird der String (oder die ersten 10 Zeichen des Strings, wenn er länger ist) als Leerzeichen benutzt. Wenn dieser Parameter null ist oder nicht unterstützt wird, werden keine Whitespaces verwendet.</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Ein JSON-String, der den angegebenen Wert repräsentiert.</p> + +<h3 id="Fehler">Fehler</h3> + +<p>Erzeugt einen {{jsxref("TypeError")}} ("cyclic object value") Fehler, wenn eine zyklische Referenz gefunden wird.</p> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p><code>JSON.stringify()</code> konvertiert einen Wert in einen in JSON-Notation gleichwertigen Wert:</p> + +<ul> + <li>Wenn der Wert eine <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify$edit#toJSON()_behavior">toJSON()</a> Methode hat, definiert diese, welche Daten serialisiert werden.</li> + <li>{{jsxref("Boolean")}}, {{jsxref("Number")}} und {{jsxref("String")}} Objekte werden zu den entsprechenden primitiven Werten, gemäß der traditionellen Konvertierungssemantik, konvertiert.</li> + <li>Wenn {{jsxref("undefined")}}, eine {{jsxref("Function", "Funktion")}} oder ein {{jsxref("Symbol")}} während der Konvertierung auftritt, wird es einfach weggelassen (wenn es in einem Objekt gefunden wird) oder zu {{jsxref("null")}} geändert (wenn es in einem Array gefunden wurde). <code>JSON.stringify</code> kann <code>undefined</code> zurückgeben, wenn nur ein Wert wie <code>JSON.stringify(function(){})</code> or <code>JSON.stringify(undefined)</code> übergeben wird.</li> + <li>Alle {{jsxref("Symbol")}}-Schlüssel-Eigenschaften werden komplett ignoriert, auch wenn die <code>replacer</code> Funktion genutzt wird.</li> + <li>Instanzen von {{jsxref("Date")}} implementieren die <code>toJSON()</code> Funktion so, dass ein String (der gleich wie bei <code>date.toISOString()</code> ist) zurückgibt. Daher werden sie als String behandelt.</li> + <li>Die Zahlen {{jsxref("Infinity")}} und {{jsxref("NaN")}} genauso wie {{jsxref("null")}} Objekte werden zu <code>null</code> umgewandelt.</li> + <li>Für alle anderen {{jsxref("Object")}} Instanzen (eingeschlossen {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("WeakMap")}} und {{jsxref("WeakSet")}}) werden nur die aufzählbaren (enumerable) Eigenschaften serialisiert.</li> +</ul> + +<pre class="brush: js">JSON.stringify({}); // '{}' +JSON.stringify(true); // 'true' +JSON.stringify('foo'); // '"foo"' +JSON.stringify([1, 'false', false]); // '[1,"false",false]' +JSON.stringify([NaN, null, Infinity]); // '[null,null,null]' +JSON.stringify({ x: 5 }); // '{"x":5}' + +JSON.stringify(new Date(2006, 0, 2, 15, 4, 5)) +// '"2006-01-02T15:04:05.000Z"' + +JSON.stringify({ x: 5, y: 6 }); +// '{"x":5,"y":6}' or '{"y":6,"x":5}' +JSON.stringify([new Number(1), new String('false'), new Boolean(false)]); +// '[1,"false",false]' + +JSON.stringify({ x: [10, undefined, function(){}, Symbol('')] }); +// '{"x":[10,null,null,null]}' + +// Standard-Datenstrukturen +JSON.stringify([new Set([1]), new Map([[1, 2]]), new WeakSet([{a: 1}]), new WeakMap([[{a: 1}, 2]])]); +// '[{},{},{},{}]' + +// TypedArray +JSON.stringify([new Int8Array([1]), new Int16Array([1]), new Int32Array([1])]); +// '[{"0":1},{"0":1},{"0":1}]' +JSON.stringify([new Uint8Array([1]), new Uint8ClampedArray([1]), new Uint16Array([1]), new Uint32Array([1])]); +// '[{"0":1},{"0":1},{"0":1},{"0":1}]' +JSON.stringify([new Float32Array([1]), new Float64Array([1])]); +// '[{"0":1},{"0":1}]' + +// toJSON() +JSON.stringify({ x: 5, y: 6, toJSON(){ return this.x + this.y} }); +// '11' + +// Symbols: +JSON.stringify({ x: undefined, y: Object, z: Symbol('') }); +// '{}' +JSON.stringify({ [Symbol('foo')]: 'foo' }); +// '{}' +JSON.stringify({ [Symbol.for('foo')]: 'foo' }, [Symbol.for('foo')]); +// '{}' +JSON.stringify({ [Symbol.for('foo')]: 'foo' }, function(k, v) { + if (typeof k === 'symbol') { + return 'a symbol'; + } +}); +// '{}' + +// Nicht-enumerable Eigenschaften: +JSON.stringify( Object.create(null, { x: { value: 'x', enumerable: false }, y: { value: 'y', enumerable: true } }) ); +// '{"y":"y"}' +</pre> + +<h3 id="Der_replacer_Parameter"><a id="The replacer parameter" name="The replacer parameter"></a>Der <code>replacer</code> Parameter</h3> + +<p>Der <code>replacer</code> Parameter kann entweder eine Funktion oder ein Array sein. Als Funktion erhält diese zwei Parameter, den Schlüssel und den Wert, die in JSON konvertiert werden. Das Objekt, in dem der Schlüssel gefunden wurde, kann in der <code>replacer</code> Funktion mit <code>this</code> abgefragt werden. Initial wird die <code>replacer</code> Funktion mit einem leeren String als Schlüssel aufgerufen, was bedeutet, dass das Objekt konvertiert wird und dieses dann für alle Eigenschaften des Objektes oder Arrays die <code>replacer</code> Funktion aufruft. Die Funktion kann den Rückgabewert wie folgt zurückgeben, damit das Objekt zum JSON-String hinzugefügt wird:</p> + +<ul> + <li>Wenn eine {{jsxref("Number")}} zurückgegeben wird, wird der entsprechende String der Zahl als Wert für die Eigenschaft zum JSON hinzugefügt.</li> + <li>Wenn ein {{jsxref("String")}} zurückgegeben wird, wird der String als Wert für die Eigenschaft zum JSON hinzugefügt.</li> + <li>Wenn ein {{jsxref("Boolean")}} zurückgegeben wird, werden "true" oder "false" als Wert für die Eigenschaft im JSON hinzugefügt.</li> + <li>Wenn <code>null</code> zurückgegeben wird, wird <code>null</code> zum JSON String kinzugefügt.</li> + <li>Wenn ein anderes Objekt zurückgegeben wird, wird dieses Objekt wiederum rekursiv in ein JSON-String konvertiert, was bedeutet, dass für jede Eigenschaft auch die <code>replacer</code> Funktion wieder aufgerufen wird. Eine Ausnahme ist, wenn das zurückgegebene Objekt eine Funktion ist, dann wird nichts zum JSON hinzugefügt.</li> + <li>Wenn <code>undefined</code> zurückgegeben wird, wird die Eigenschaft nicht in das JSON hinzugefügt.</li> +</ul> + +<div class="note"><strong>Hinweis:</strong> Man kann eine <code>replacer</code> Funktion nicht nutzen, um Werte von Arrays zu entfernen. Wenn man <code>undefined</code> oder eine function zurückgibt, wird <code>null</code> zum JSON hinzugefügt.</div> + +<div class="note"><strong>Hinweis:</strong> Wenn man möchten, dass der Replacer ein initiales Objekt von einem Schlüssel mit einer leeren String-Eigenschaft unterscheidet (da beide den leeren String als Schlüssel und möglicherweise ein Objekt als Wert angeben würden), muss man den Anzahl der Iterationen verfolgen (wenn er jenseits der ersten Iteration ist, ist es ein echter leerer String-Schlüssel).</div> + +<h4 id="Beispiel_mit_einer_Funktion">Beispiel mit einer Funktion</h4> + +<pre class="brush: js">function replacer(key, value) { + if (typeof value === "string") { + return undefined; + } + return value; +} + +var foo = {foundation: "Mozilla", model: "box", week: 45, transport: "car", month: 7}; +var jsonString = JSON.stringify(foo, replacer); +// <code>{"week":45,"month":7}</code> </pre> + +<h4 id="Beispiel_mit_einem_Array">Beispiel mit einem Array</h4> + +<p>Wenn <code>replacer</code> ein Array ist, geben die Werte des Arrays die Namen der Eigenschaften an, die im JSON-String mit aufgenommen werden sollen.</p> + +<pre class="brush: js">JSON.stringify(foo, ['week', 'month']); +// '{"week":45,"month":7}', only keep "week" and "month" properties +</pre> + +<h3 id="Der_space_Parameter"><a id="The space argument" name="The space argument"></a>Der <code>space</code> Parameter</h3> + +<p>Der <code>space</code> Parameter wird eingesetzt, um die Abstände in dem JSON-String zu beeinflussen. Wenn es eine Zahl ist, werden sukzessiv alle Stufen um die angegebene Anzahl von Leerzeichen (bis zu 10) eingerückt. Wenn <code>space</code> ein String ist, werden sukzessiv alle Stufen mit dem angegebenen String eingerückt (oder mit den ersten zehn Zeichen).</p> + +<pre class="brush: js">JSON.stringify({ a: 2 }, null, ' '); +// '{ +// "a": 2 +// }' +</pre> + +<p>Einsatz eines Tab-Zeichens als Standard für leserliches Aussehen:</p> + +<pre class="brush: js">JSON.stringify({ uno: 1, dos: 2 }, null, '\t'); +// returns the string: +// '{ +// "uno": 1, +// "dos": 2 +// }' +</pre> + +<h3 id="toJSON_Verhalten"><code>toJSON()</code> Verhalten</h3> + +<p>Wenn ein Objekt in ein JSON-String umgewandelt werden soll und eine Eigenschaft mit dem Namen <code>toJSON</code>, dessen Wert eine Funktion ist, wird die <code>toJSON()</code> Funktion eingesetzt um ein JSON-String zu erstellen: Anstatt, dass das Objekt normal serialisiert wird, wird die <code>toJSON()</code> Funktion aufgerufen und der Rückgabewert serialisiert. JSON.stringify ruft <code>toJSON</code> mit einem Parameter auf:</p> + +<ul> + <li>wenn das Objekt ein Eigenschaftswert ist, dann der Name der Eigenschaft</li> + <li>wenn es ein Array ist, dann den Index im Array als String</li> + <li>ein leerer String, wenn JSON.stringify direkt auf dem Objekt aufgerufen wurde</li> +</ul> + +<p>Zum Beispiel:</p> + +<pre class="brush: js">var obj = { + data: 'data', + + toJSON(key){ + if(key) + return `Now I am a nested Object under key '${key}'`; + + else + return this; + } +}; + +JSON.stringify(obj); +// Returns '{"data":"data"}' + +JSON.stringify({ obj }); +// Returns '{"obj":"Now I am a nested object under key 'obj'"}' + +JSON.stringify([ obj ]) +// Returns '["Now I am a nested object under key '0'"]'</pre> + +<h3 id="Probleme_mit_JSON.stringify_bei_zyklischen_Referenzen">Probleme mit <code>JSON.stringify</code> bei zyklischen Referenzen</h3> + +<p>Zu beachten ist, dass das <a href="https://www.json.org/">JSON Format</a> keine Objektreferenzen unterstützt (es existiert nur ein <a href="http://tools.ietf.org/html/draft-pbryan-zyp-json-ref-03">IETF Entwurf</a>), so dass ein {{jsxref("TypeError")}} erzeugt wird, wenn ein Objekt mit zyklischen Referenzen übersetzt werden soll.</p> + +<pre class="brush: js example-bad">const circularReference = {}; +circularReference.myself = circularReference; + +// Serializing circular references throws "TypeError: cyclic object value" +JSON.stringify(circularReference); +</pre> + +<p>Um zyklische Referenzen zu Serialisieren, wird ein Bibliothek mit solchen Funktionen benötigt (z. B. <a href="https://github.com/douglascrockford/JSON-js/blob/master/cycle.js">cycle.js</a> von Douglas Crockford) oder es muss eine eigene Lösung implementiert werden, welche zyklische Referenzen bei serialisierbaren Werten findet und ersetzt (oder entfernt).</p> + +<h3 id="Probleme_mit_reinem_Einsatz_von_JSON.stringify_für_JavaScript">Probleme mit reinem Einsatz von <code>JSON.stringify</code> für JavaScript</h3> + +<p>Man muss anmerken, dass JSON <a href="http://timelessrepo.com/json-isnt-a-javascript-subset">keine komplette strikte Untermenge von JavaScript ist (englisch)</a>. Es gibt nämlich zwei Zeilentrenner (Zeilentrenner und Paragraphentrenner), die in JSON nicht escaped werden müssen, in JavasScript jedoch schon. Wenn ein JSON nun ausgewertet oder direkt in <a href="https://de.wikipedia.org/wiki/JavaScript_Object_Notation#JSONP">JSONP</a> eingesetzt werden soll, kann der folgende Quelltext verwendet werden:</p> + +<pre class="brush: js">function jsFriendlyJSONStringify (s) { + return JSON.stringify(s). + replace(/\u2028/g, '\\u2028'). + replace(/\u2029/g, '\\u2029'); +} + +var s = { + a: String.fromCharCode(0x2028), + b: String.fromCharCode(0x2029) +}; +try { + eval('(' + JSON.stringify(s) + ')'); +} catch (e) { + console.log(e); // "SyntaxError: unterminated string literal" +} + +// kein catch benötigt +eval('(' + jsFriendlyJSONStringify(s) + ')'); + +// console.log in Firefox unescapes den Unicode wenn +// in die Konsole geloggt wird, weshalb hier alert eingesetzt wird. +alert(jsFriendlyJSONStringify(s)); // {"a":"\u2028","b":"\u2029"}</pre> + +<h3 id="Beispiel_für_Einsatz_von_JSON.stringify_mit_localStorage">Beispiel für Einsatz von <code>JSON.stringify()</code> mit <code>localStorage</code></h3> + +<p>In einem Fall, indem man ein Objekt speichern möchte, dass von einem Benutzer erstellt wurde, und dem Benutzer dieses auch nach dem Schließen des Browsers wieder zur Verfügung stellten möchte, ist ein Beispiel für die Anwendung von <code>JSON.stringify()</code>:</p> + +<pre class="brush: js">// Creating an example of JSON +var session = { + 'screens': [], + 'state': true +}; +session.screens.push({ 'name': 'screenA', 'width': 450, 'height': 250 }); +session.screens.push({ 'name': 'screenB', 'width': 650, 'height': 350 }); +session.screens.push({ 'name': 'screenC', 'width': 750, 'height': 120 }); +session.screens.push({ 'name': 'screenD', 'width': 250, 'height': 60 }); +session.screens.push({ 'name': 'screenE', 'width': 390, 'height': 120 }); +session.screens.push({ 'name': 'screenF', 'width': 1240, 'height': 650 }); + +// Konvertiert zu einem JSON-String mit JSON.stringify(). +// Dann wird der String des session-Objektes im localStorage gespeichert. +localStorage.setItem('session', JSON.stringify(session)); + +// Beispiel wie man den mit JSON.stringify() generierten und +// im localStorage gespeicherten JSON-String in ein Objekt umwandelt. +var restoredSession = JSON.parse(localStorage.getItem('session')); + +// Jetzt enthält die Variable restoredSession das im localStorage +// abgespeicherte Objekt +console.log(restoredSession); +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.12.3', 'JSON.stringify')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initiale Definition. Implementiert in JavaScript 1.7.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-json.stringify', 'JSON.stringify')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-json.stringify', 'JSON.stringify')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.JSON.stringify")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("JSON.parse()")}}</li> + <li><a href="https://github.com/douglascrockford/JSON-js/blob/master/cycle.js">cycle.js</a> – Führt zwei Funktionen ein, <code>JSON.decycle</code> und <code>JSON.retrocycle</code>, welche es ermöglichen zyklische Strukturen zu kodieren und dekodieren und eine erweiterbare und JSON Format kompatible Struktur bietet.</li> +</ul> |