JavaScript-Anzeigeobjekte

Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen

Wie zeige ich JavaScript-Objekte an?

Beim Anzeigen eines JavaScript-Objekts wird [object Object] ausgegeben.

Beispiel

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

document.getElementById("demo").innerHTML = person;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Displaying a JavaScript object will output [object Object]:</p>

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

<script>
const person = {
  name: "John",
  age: 30,
  city: "New York"
};

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

</body>
</html>

Einige gängige Lösungen zum Anzeigen von JavaScript-Objekten sind:

  • Anzeige der Objekteigenschaften nach Namen
  • Anzeigen der Objekteigenschaften in einer Schleife
  • Anzeigen des Objekts mit Object.values()
  • Anzeigen des Objekts mit JSON.stringify()

Objekteigenschaften anzeigen

Die Eigenschaften eines Objekts können als String angezeigt werden:

Beispiel

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

document.getElementById("demo").innerHTML =
person.name + "," + person.age + "," + person.city;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Display object properties:</p>

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

<script>
const person = {
  name: "John",
  age: 30,
  city: "New York"
};

document.getElementById("demo").innerHTML = person.name + ", " + person.age + ", " + person.city;
</script>

</body>
</html>

Anzeigen des Objekts in einer Schleife

Die Eigenschaften eines Objekts können in einer Schleife gesammelt werden:

Beispiel

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

let txt = "";
for (let x in person) {
txt += person[x] + " ";
};

document.getElementById("demo").innerHTML = txt;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Display object properties:</p>

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

<script>
const person = {
  name: "John",
  age: 30,
  city: "New York"
};

let txt = "";
for (let x in person) {
  txt += person[x] + " ";
};

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

</body>
</html>

Sie müssen person[x] in der Schleife verwenden.

person.x funktioniert nicht (weil x eine Variable ist).

Verwenden von Object.values()

Jedes JavaScript-Objekt kann mit Object.values() in ein Array konvertiert werden:

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

const myArray = Object.values(person);

myArray ist jetzt ein JavaScript-Array, das angezeigt werden kann:

Beispiel

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

const myArray = Object.values(person);
document.getElementById("demo").innerHTML = myArray;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Object.values() converts an object to an array.</p>

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

<script>
const person = {
  name: "John",
  age: 30,
  city: "New York"
};

document.getElementById("demo").innerHTML = Object.values(person);
</script>

</body>
</html>

Object.values() wird seit 2016 in allen gängigen Browsern unterstützt.

54 (2016) 14 (2016) 47 (2016) 10 (2016) 41 (2016)

Verwenden von JSON.stringify()

Jedes JavaScript-Objekt kann mit der JavaScript-Funktion in einen String umgewandelt (in einen String umgewandelt) werden JSON.stringify():

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

let myString = JSON.stringify(person);

myString ist jetzt ein JavaScript-String, der angezeigt werden kann:

Beispiel

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

let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Display properties in JSON format:</p>

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

<script>
const person = {
  name: "John",
  age: 30,
  city: "New York"
};

document.getElementById("demo").innerHTML = JSON.stringify(person);
</script>

</body>
</html>

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

{"name": "John", "age": 50, "city": "New York"}

JSON.stringify() ist in JavaScript enthalten und wird in allen gängigen Browsern unterstützt.

Datumsangaben stringifizieren

JSON.stringify wandelt Datumsangaben in Strings um:

Beispiel

const person = {
  name: "John",
  today: new Date()
};

let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>JSON.stringify will convert dates into strings:</p>

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

<script>
var person = {
  name: "John",
  today: new Date()
};

document.getElementById("demo").innerHTML = JSON.stringify(person);
</script>

</body>
</html>

Stringify-Funktionen

JSON.stringify stringifiziert keine Funktionen:

Beispiel

const person = {
  name: "John",
  age: function () {return 30;}
};

let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>JSON.stringify will not stringify functions:</p>

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

<script>
const person = {
  name: "John",
  age: function () {return 30;}
};

document.getElementById("demo").innerHTML = JSON.stringify(person);
</script>

</body>
</html>

Dies kann „behoben“ werden, wenn Sie die Funktionen vor der Stringifizierung in Strings konvertieren.

Beispiel

const person = {
  name: "John",
  age: function () {return 30;}
};
person.age = person.age.toString();

let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Display Objects</h2>
<p>JSON.stringify will not stringify functions.</p>
<p>You have to convert functions to strings first:</p>

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

<script>
const person = {
  name: "John",
  age: function () {return 30;}
};
person.age = person.age.toString();

document.getElementById("demo").innerHTML = JSON.stringify(person);
</script>

</body>
</html>

Stringifizieren Sie Arrays

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

Beispiel

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

let myString = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myString;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Arrays</h1>
<p>JSON.stringify can stringify arrays:</p>

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

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

</body>
</html>

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

[„John“, „Peter“, „Sally“, „Jane“]