JavaScript-näyttöobjektit


Sisällysluettelo

    Näytä sisällysluettelo


Kuinka näyttää JavaScript-objekteja?

JavaScript-objektin näyttäminen tulostaa [object Object].

Esimerkki

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

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

Kokeile itse →

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

Joitakin yleisiä ratkaisuja JavaScript-objektien näyttämiseen ovat:

  • Objektin ominaisuuksien näyttäminen nimellä
  • Objektin ominaisuuksien näyttäminen silmukassa
  • Objektin näyttäminen Object.values()-komennolla
  • Objektin näyttäminen JSON.stringify()-komennolla


Objektin ominaisuuksien näyttäminen

Objektin ominaisuudet voidaan näyttää merkkijonona:

Esimerkki

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

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

Kokeile itse →

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

Objektin näyttäminen silmukassa

Objektin ominaisuudet voidaan kerätä silmukaksi:

Esimerkki

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

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

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

Kokeile itse →

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

Sinun on käytettävä henkilöä[x] silmukassa.

person.x ei toimi (koska x on muuttuja).


Object.values()

Mikä tahansa JavaScript-objekti voidaan muuntaa taulukoksi komennolla Object.values():

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

const myArray = Object.values(person);

myArray on nyt JavaScript-taulukko, joka on valmis näytettäväksi:

Esimerkki

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

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

Kokeile itse →

<!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() on tuettu kaikissa yleisimmissä selaimissa vuodesta 2016 lähtien.

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


JSON.stringify()

Mikä tahansa JavaScript-objekti voidaan ketjuttaa (muuntaa merkkijonoksi) JavaScript-toiminnolla JSON.stringify():

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

let myString = JSON.stringify(person);

myString on nyt JavaScript-merkkijono, joka on valmis näytettäväksi:

Esimerkki

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

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

Kokeile itse →

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

Tuloksena on merkkijono, joka seuraa JSON-merkintää:

{"nimi":"John","ikä":50"kaupunki":"New York"}

JSON.stringify() sisältyy JavaScriptiin ja sitä tuetaan kaikissa yleisimmissä selaimissa.


Rajoita päivämäärät

JSON.stringify muuntaa päivämäärät merkkijonoiksi:

Esimerkki

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

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

Kokeile itse →

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

JSON.stringify ei rajoita toimintoja:

Esimerkki

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

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

Kokeile itse →

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

Tämä voidaan "korjata", jos muunnat funktiot merkkijonoiksi ennen merkkijonoa.

Esimerkki

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

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

Kokeile itse →

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

JavaScript-taulukoita on myös mahdollista joustaa:

Esimerkki

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

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

Kokeile itse →

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

Tuloksena on merkkijono, joka seuraa JSON-merkintää:

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