JSON.parse()


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


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

Beim Empfang von Daten von einem Webserver handelt es sich bei den Daten immer um eine Zeichenfolge.

Analysieren Sie die Daten mit JSON.parse() und die Daten werden zu einem JavaScript-Objekt.


Beispiel - Parsen von JSON

Stellen Sie sich vor, wir erhalten diesen Text von einem Webserver:

'{"name":"John", "age":30, "city":"New York"}'

Verwenden Sie die JavaScript-Funktion JSON.parse(), um Text in ein JavaScript-Objekt zu konvertieren:

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

Stellen Sie sicher, dass der Text im JSON-Format vorliegt, sonst erhalten Sie einen Syntaxfehler.

Verwenden Sie das JavaScript-Objekt auf Ihrer Seite:

Beispiel

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

<script>
document.getElementById("demo").innerHTML = obj.name;
</script>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>Creating an Object from a JSON String</h2>

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

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

</body>
</html>

Array als JSON

Wenn Sie JSON.parse() für ein von einem Array abgeleitetes JSON verwenden, wird die Methode dies tun Gibt ein JavaScript-Array anstelle eines JavaScript-Objekts zurück.

Beispiel

const text = '["Ford", "BMW", "Audi", "Fiat"]';
const myArr = JSON.parse(text);

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>Parsing a JSON Array.</h2>
<p>Data written as an JSON array will be parsed into a JavaScript array.</p>
<p id="demo"></p>

<script>
const text = '[ "Ford", "BMW", "Audi", "Fiat" ]';
const myArr = JSON.parse(text);
document.getElementById("demo").innerHTML = myArr[0];
</script>

</body>
</html>


Ausnahmen

Daten analysieren

Datumsobjekte sind in JSON nicht zulässig.

Wenn Sie ein Datum angeben müssen, schreiben Sie es als Zeichenfolge.

Sie können es später wieder in ein Datumsobjekt umwandeln:

Beispiel

Konvertieren Sie eine Zeichenfolge in ein Datum:

const text =
  '{"name":"John", "birth":"1986-12-14", "city":"New York"}';
  const obj = JSON.parse(text);
obj.birth = new Date(obj.birth);
  
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>Convert a string into a date object.</h2>
<p id="demo"></p>

<script>
const text = '{"name":"John", "birth":"1986-12-14", "city":"New York"}';
const obj = JSON.parse(text);
obj.birth = new Date(obj.birth);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth; 
</script>

</body>
</html>

Oder Sie können den zweiten Parameter der Funktion JSON.parse() mit dem Namen reviver verwenden.

Der Parameter reviver ist eine Funktion, die jede Eigenschaft überprüft, bevor der Wert zurückgegeben wird.

Beispiel

Konvertieren Sie eine Zeichenfolge mit der Funktion reviver in ein Datum:

const text =
  '{"name":"John", "birth":"1986-12-14", "city":"New York"}';
  const obj = JSON.parse(text, function (key, value) {
  if 
  (key == "birth") {
    return new 
  Date(value);
  } else {
    
  return value;
  }
});
  
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>Convert a string into a date object.</h2>

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

<script>
const text = '{"name":"John", "birth":"1986-12-14", "city":"New York"}';
const obj = JSON.parse(text, function (key, value) {
  if (key == "birth") {
    return new Date(value);
  } else {
    return value;
  }
});
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth; 
</script>

</body>
</html>

Parsing-Funktionen

Funktionen sind in JSON nicht zulässig.

Wenn Sie eine Funktion einbinden müssen, schreiben Sie sie als String.

Sie können es später wieder in eine Funktion umwandeln:

Beispiel

Wandeln Sie einen String in eine Funktion um:

const text =
  '{"name":"John", "age":"function () {return 
  30;}", "city":"New York"}';
  const obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");
  
document.getElementById("demo").innerHTML = obj.name + ", " + 
  obj.age();

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>Convert a string into a function.</h2>
<p id="demo"></p>

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

</body>
</html>

Sie sollten die Verwendung von Funktionen in JSON vermeiden, da die Funktionen ihren Umfang verlieren. und Sie müssten eval() verwenden, um sie wieder in Funktionen umzuwandeln.