JSON.stringify()


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


Eine häufige Verwendung von JSON ist der Datenaustausch zu/von einem Webserver.

Beim Senden von Daten an einen Webserver müssen die Daten vorhanden sein ein Faden.

Konvertieren Sie ein JavaScript-Objekt in einen String mit JSON.stringify().


Stringifizieren Sie ein JavaScript-Objekt

Stellen Sie sich vor, wir haben dieses Objekt in JavaScript:

const obj = {name: "John", age: 30, city: "New York"};

Verwenden Sie die JavaScript-Funktion JSON.stringify(), um es in einen String umzuwandeln.

const myJSON = JSON.stringify(obj);

Das Ergebnis ist eine Zeichenfolge, die der JSON-Notation folgt.

myJSON ist jetzt eine Zeichenfolge und kann an einen Server gesendet werden:

Beispiel

const obj = {name: "John", age: 30, city: "New York"};
const myJSON = 
  JSON.stringify(obj);
  

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>Create a JSON string from a JavaScript object.</h2>
<p id="demo"></p>

<script>
const obj = {name: "John", age: 30, city: "New York"};
const myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
</script>

</body>
</html>

In den nächsten Kapiteln erfahren Sie, wie Sie JSON an einen Server senden.


Stringifizieren Sie ein JavaScript-Array

Es ist auch möglich, JavaScript-Arrays zu stringifizieren:

Stellen Sie sich vor, wir haben dieses Array in JavaScript:

const arr = ["John", "Peter", "Sally", "Jane"];

Verwenden Sie die JavaScript-Funktion JSON.stringify(), um es in einen String umzuwandeln.

const myJSON = JSON.stringify(arr);

Das Ergebnis ist eine Zeichenfolge, die der JSON-Notation folgt.

myJSON ist jetzt eine Zeichenfolge und kann an einen Server gesendet werden:

Beispiel

const arr = ["John", "Peter", "Sally", "Jane"];
const myJSON = 
  JSON.stringify(arr);
  

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>Create a JSON string from a JavaScript array.</h2>
<p id="demo"></p>

<script>
const arr = ["John", "Peter", "Sally", "Jane"];
const myJSON = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myJSON;
</script>

</body>
</html>

In den nächsten Kapiteln erfahren Sie, wie Sie einen JSON-String an einen Server senden.


Daten speichern

Beim Speichern von Daten müssen die Daten ein bestimmtes Format haben und unabhängig davon, wo Sie sie speichern möchten, text ist immer eines der zulässigen Formate.

JSON ermöglicht die Speicherung von JavaScript-Objekten als Text.

Beispiel

Speichern von Daten im lokalen Speicher

 // Storing data:
const myObj = {name: "John", 
  age: 31, city: "New York"};
const myJSON = 
  JSON.stringify(myObj);
localStorage.setItem("testJSON", myJSON);

  // Retrieving data:
let text = localStorage.getItem("testJSON");
let obj = 
  JSON.parse(text);
document.getElementById("demo").innerHTML = obj.name;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>Store and retrieve data from local storage.</h2>
<p id="demo"></p>

<script>
// Storing data:
const myObj = { name: "John", age: 31, city: "New York" };
const myJSON = JSON.stringify(myObj);
localStorage.setItem("testJSON", myJSON);

// Retrieving data:
let text = localStorage.getItem("testJSON");
let obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.name;
</script>

</body>
</html>


Ausnahmen

Datumsangaben stringifizieren

In JSON sind Datumsobjekte nicht zulässig. Die Funktion JSON.stringify() führt eine Konvertierung durch beliebige Daten in Strings.

Beispiel

const obj = {name: "John", today: new Date(), city : "New York"};
const myJSON = JSON.stringify(obj);

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JSON.stringify() converts date objects into strings.</h2>
<p id="demo"></p>

<script>
const obj = {name: "John", today: new Date(), city: "New York"};
const myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
</script>

</body>
</html>

Sie können die Zeichenfolge beim Empfänger wieder in ein Datumsobjekt umwandeln.


Stringify-Funktionen

In JSON sind Funktionen als Objektwerte nicht zulässig.

Die Funktion JSON.stringify() entfernt alle Funktionen aus einem JavaScript Objekt, sowohl der Schlüssel als auch der Wert:

Beispiel

const obj = {name: "John", age: function () {return 30;}, city: "New York"};
const myJSON = JSON.stringify(obj);

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JSON.stringify() will remove any functions from an object.</h2>
<p id="demo"></p>

<script>
const obj = {name: "John", age: function () {return 30;}, city: "New York"};
const myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
</script>

</body>
</html>

Dies kann weggelassen werden, wenn Sie Ihre Funktionen vor der Ausführung in Strings konvertieren die Funktion JSON.stringify().

Beispiel

const obj = {name: "John", age: function () {return 30;}, city: "New York"};
  obj.age = obj.age.toString();
const myJSON = JSON.stringify(obj);

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JSON.stringify() will remove any functions from an object.</h2>
<p>Convert functions into strings to keep them in the JSON object.</p>

<p id="demo"></p>

<script>
const obj = {name: "John", age: function () {return 30;}, city: "New York"};
obj.age = obj.age.toString();
const myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
</script>

</body>
</html>

Wenn Sie Funktionen mit JSON senden, verlieren die Funktionen ihren Gültigkeitsbereich und den Empfänger müsste eval() verwenden, um sie wieder in Funktionen umzuwandeln.