Objek Tampilan JavaScript

Bagaimana cara menampilkan objek JavaScript?

Menampilkan objek JavaScript akan menampilkan [object Object].

Contoh

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
document.getElementById("demo").innerHTML = person;

Coba Sendiri

Solusi umum untuk menampilkan objek JavaScript adalah:

  • Menampilkan properti objek berdasarkan nama
  • Menampilkan properti objek dalam loop
  • Menampilkan objek dengan Object.values()
  • Menampilkan objek dengan JSON.stringify()

Menampilkan properti objek

Properti objek dapat ditampilkan sebagai string:

Contoh

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
document.getElementById("demo").innerHTML =
person.name + "," + person.age + "," + person.city;

Coba Sendiri

Menampilkan objek dalam loop

Dapat mengumpulkan properti objek dalam loop:

Contoh

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
let txt = "";
for (let x in person) {
txt += person[x] + " ";
};
document.getElementById("demo").innerHTML = txt;

Coba Sendiri

Anda harus menggunakan person[x] dalam loop.

person.x tidak akan berfungsi (karena x adalah variabel).

Dengan Object.values()

Dengan menggunakan Object.values(), setiap objek JavaScript dapat diubah ke array:

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
const myArray = Object.values(person);

myArray Sekarang adalah array JavaScript, dapat ditampilkan:

Contoh

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
const myArray = Object.values(person);
document.getElementById("demo").innerHTML = myArray;

Coba Sendiri

Sejak 2016, semua peramban utama mendukungnya Object.values().

Chrome IE Firefox Safari Opera
54 (2016) 14 (2016) 47 (2016) 10 (2016) 41 (2016)

Dengan JSON.stringify()

Setiap objek JavaScript dapat digunakan dengan fungsi JavaScript JSON.stringify() Melakukan stringifikasi (mengubah ke string):

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
let myString = JSON.stringify(person);

myString Sekarang adalah string JavaScript, dapat ditampilkan:

Contoh

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

Coba Sendiri

Hasil akan menjadi string yang mengikuti standar penanda JSON:

{"name":"Bill","age":19,"city":"Seattle"}

JSON.stringify() Termasuk di JavaScript, semua peramban utama mendukungnya.

Stringifikasi tanggal

JSON.stringify Konversi tanggal ke string:

Contoh

const person = {
  name: "Bill",
  today: new Date()
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

Coba Sendiri

Serealisasi Fungsi

JSON.stringify Fungsi tidak akan diserialisasi:

Contoh

const person = {
  name: "Bill",
  age: function () {return 19;}
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

Coba Sendiri

Jika fungsi diubah menjadi string sebelum diserialisasi, ini dapat menjadi "tetap".

Contoh

const person = {
  name: "Bill",
  age: function () {return 19;}
};
person.age = person.age.toString();
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

Coba Sendiri

Kondensasi Array

Juga dapat mengkondensasi array JavaScript ke string:

Contoh

const arr = ["Bill", "Steve", "Elon", "David"];
let myString = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myString;

Coba Sendiri

Hasil akan menjadi string yang mengikuti standar penanda JSON:

["Bill","Steve","Elon","David"]