JSON-Literale


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


Dies ist eine JSON-Zeichenfolge:

'{"name":"John", "age":30, "car":null}'

Innerhalb der JSON-Zeichenfolge befindet sich ein JSON-Objektliteral:

{"name":"John", "age":30, "car":null}

JSON-Objektliterale werden von geschweiften Klammern {} umgeben.

JSON-Objektliterale enthalten Schlüssel/Wert-Paare.

Schlüssel und Werte werden durch einen Doppelpunkt getrennt.

Schlüssel müssen Zeichenfolgen sein, und Werte müssen ein gültiger JSON-Datentyp sein:

  • Zeichenfolge
  • Nummer
  • Objekt
  • Array
  • boolean
  • null

Jedes Schlüssel/Wert-Paar wird durch ein Komma getrennt.

Es ist ein häufiger Fehler, ein JSON-Objektliteral als „JSON-Objekt“ zu bezeichnen.

JSON kann kein Objekt sein. JSON ist ein String-Format.

Die Daten sind nur JSON, wenn sie in einem String-Format vorliegen. Wenn es in eine JavaScript-Variable konvertiert wird, wird es zu einem JavaScript-Objekt.


JavaScript-Objekte

Sie können ein JavaScript-Objekt aus einem JSON-Objektliteral erstellen:

Beispiel

myObj = {"name":"John", "age":30, "car":null};

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>Creating an Object from a JSON Literal</h2>
<p id="demo"></p>

<script>
const myObj = {"name":"John", "age":30, "car":null};
document.getElementById("demo").innerHTML = myObj.name;
</script>

</body>
</html>

Normalerweise erstellen Sie ein JavaScript-Objekt, indem Sie eine JSON-Zeichenfolge analysieren:

Beispiel

myJSON = '{"name":"John", "age":30, "car":null}';
myObj = JSON.parse(myJSON);

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>Creating an Object Parsing JSON</h2>
<p id="demo"></p>

<script>
const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.name;
</script>

</body>
</html>

Auf Objektwerte zugreifen

Sie können auf Objektwerte zugreifen, indem Sie die Punktnotation (.) verwenden:

Beispiel

const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);
  x = myObj.name;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>Access a JavaScript Object</h2>
<p id="demo"></p>

<script>
const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.name;
</script>

</body>
</html>

Sie können auch auf Objektwerte zugreifen, indem Sie die Klammernotation ([]) verwenden:

Beispiel

const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);
  x = myObj["name"];

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>Access a JavaScript Object</h2>
<p id="demo"></p>

<script>
const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj["name"];
</script>

</body>
</html>


Ein Objekt in einer Schleife ausführen

Sie können Objekteigenschaften mit einer For-In-Schleife durchlaufen:

Beispiel

const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);

let text = "";
for (const x in myObj) {
  text += x + ", ";
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>Looping Object Properties</h2>
<p id="demo"></p>

<script>
const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);

let text = "";
for (const x in myObj) {
  text += x + ", ";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Verwenden Sie in einer for-in-Schleife die Klammernotation, um auf die Eigenschaft values zuzugreifen:

Beispiel

const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);

let text = "";
for (const x in myObj) {
  text += myObj[x] + ", ";
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>Looping JavaScript Object Values</h2>
<p id="demo"></p>

<script>
const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);

let text = "";
for (const x in myObj) {
  text += myObj[x] + ", ";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>