JavaScript megjelenítési objektumok

Tartalomjegyzék

    Tartalomjegyzék megjelenítése

Hogyan lehet JavaScript objektumokat megjeleníteni?

A JavaScript objektum megjelenítése a következőt fogja adni: [object Object].

Példa

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

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

Próbálja ki Ön is →

<!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>

Néhány gyakori megoldás a JavaScript objektumok megjelenítésére:

  • Az objektum tulajdonságainak megjelenítése név szerint
  • Az objektum tulajdonságainak megjelenítése ciklusban
  • Az objektum megjelenítése az Object.values() segítségével
  • Az objektum megjelenítése a JSON.stringify() segítségével

Objektumtulajdonságok megjelenítése

Egy objektum tulajdonságai karakterláncként jeleníthetők meg:

Példa

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

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

Próbálja ki Ön is →

<!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>

Az objektum megjelenítése hurokban

Egy objektum tulajdonságai hurokba gyűjthetők:

Példa

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

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

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

Próbálja ki Ön is →

<!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>

A ciklusban a személy[x] kifejezést kell használnia.

A person.x nem fog működni (mivel az x egy változó).

Az Object.values() használata

Bármely JavaScript objektum átalakítható tömbbé az Object.values() használatával:

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

const myArray = Object.values(person);

A myArray mostantól egy JavaScript-tömb, amely készen áll a megjelenítésre:

Példa

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

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

Próbálja ki Ön is →

<!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>

Az Object.values() 2016 óta minden nagyobb böngészőben támogatott.

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

A JSON.stringify() használata

Bármely JavaScript objektum karakterláncolható (karakterláncsá alakítható) a JavaScript függvénnyel JSON.stringify():

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

let myString = JSON.stringify(person);

A myString mostantól egy JavaScript-karakterlánc, amely készen áll a megjelenítésre:

Példa

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

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

Próbálja ki Ön is →

<!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>

Az eredmény a JSON jelölést követő karakterlánc lesz:

{"név":"János","életkor":50,"város":"New York"}

A JSON.stringify() szerepel a JavaScriptben, és minden nagyobb böngésző támogatja.

Dátumok lehúzása

A JSON.stringify a dátumokat karakterláncokká alakítja:

Példa

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

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

Próbálja ki Ön is →

<!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 Functions

A JSON.stringify nem karcolja le a függvényeket:

Példa

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

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

Próbálja ki Ön is →

<!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>

Ez akkor "javítható", ha a függvényeket stringekké alakítja a felfűzés előtt.

Példa

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

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

Próbálja ki Ön is →

<!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>

Stringify Arrays

Lehetőség van a JavaScript tömbök stringizálására is:

Példa

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

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

Próbálja ki Ön is →

<!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>

Az eredmény a JSON jelölést követő karakterlánc lesz:

["John", "Peter", "Sally", "Jane"]