Objek Tampilan JavaScript
Bagaimana Menampilkan Objek JavaScript?
Menampilkan objek JavaScript akan menampilkan [object Object] .
Contoh
const person = {
name: "John",
age: 30,
city: "New York"
};
document.getElementById("demo").innerHTML = person;
Beberapa solusi umum untuk menampilkan objek JavaScript adalah:
- Menampilkan Properti Objek dengan nama
- Menampilkan Properti Objek dalam Loop
- Menampilkan Objek menggunakan Object.values()
- Menampilkan Objek menggunakan JSON.stringify()
Menampilkan Properti Objek
Properti suatu objek dapat ditampilkan sebagai string:
Contoh
const person = {
name: "John",
age: 30,
city: "New York"
};
document.getElementById("demo").innerHTML =
person.name + "," + person.age + "," + person.city;
Menampilkan Objek dalam Loop
Properti suatu objek dapat dikumpulkan dalam satu lingkaran:
Contoh
const person = {
name: "John",
age: 30,
city: "New York"
};
let txt = "";
for (let x in person) {
txt += person[x] + " ";
};
document.getElementById("demo").innerHTML = txt;
Anda harus menggunakan person[x] dalam loop.
person.x tidak akan berfungsi (Karena x adalah variabel).
Menggunakan Object.values()
Objek JavaScript apa pun dapat dikonversi ke array menggunakan Object.values()
:
const person = {
name: "John",
age: 30,
city: "New York"
};
const myArray = Object.values(person);
myArray
sekarang menjadi larik JavaScript, siap ditampilkan:
Contoh
const person = {
name: "John",
age: 30,
city: "New York"
};
const myArray = Object.values(person);
document.getElementById("demo").innerHTML = myArray;
Object.values()
didukung di semua browser utama sejak 2016.
54 (2016) | 14 (2016) | 47 (2016) | 10 (2016) | 41 (2016) |
Menggunakan JSON.stringify()
Objek JavaScript apa pun dapat dirangkai (dikonversi menjadi string) dengan fungsi JavaScript
JSON.stringify()
:
const person = {
name: "John",
age: 30,
city: "New York"
};
let myString = JSON.stringify(person);
myString
sekarang menjadi string JavaScript, siap ditampilkan:
Contoh
const person = {
name: "John",
age: 30,
city: "New York"
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
Hasilnya akan menjadi string mengikuti notasi JSON:
{"name":"John","age":50,"city":"New York"}
JSON.stringify()
disertakan dalam JavaScript dan didukung di semua browser utama.
Merangkai Tanggal
JSON.stringify
mengubah tanggal menjadi string:
Contoh
const person = {
name: "John",
today: new Date()
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
Fungsi Stringify
JSON.stringify
tidak akan merangkai fungsi:
Contoh
const person = {
name: "John",
age: function () {return 30;}
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
Ini bisa "diperbaiki" jika Anda mengubah fungsi menjadi string sebelum merangkai.
Contoh
const person = {
name: "John",
age: function () {return 30;}
};
person.age = person.age.toString();
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
Merangkai Array
Dimungkinkan juga untuk merangkai array JavaScript:
Contoh
const arr = ["John", "Peter", "Sally", "Jane"];
let myString = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myString;
Hasilnya akan menjadi string mengikuti notasi JSON:
["John", "Peter", "Sally", "Jane"]