JavaScript-objektin näyttäminen tulostaa [object Object].
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 ominaisuudet voidaan näyttää merkkijonona:
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 ominaisuudet voidaan kerätä silmukaksi:
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).
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:
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) |
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:
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.
JSON.stringify
muuntaa päivämäärät merkkijonoiksi:
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>
JSON.stringify
ei rajoita toimintoja:
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.
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>
JavaScript-taulukoita on myös mahdollista joustaa:
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"]