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.
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:
<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>
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.
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>
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:
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.
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>
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:
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.