Section Artikel
Bagaimana Menampilkan Objek JavaScript?
Menampilkan objek JavaScript akan menghasilkan [Object Object].
Contoh:
<!DOCTYPE html> <html> <body> <h2>Menampilkan Objek </h2> <p id="demo"></p> <script> var person = {name:"John", age:30, city:"New York"}; document.getElementById("demo").innerHTML = person; </script> </body> </html>
Beberapa solusi yang umum digunakan 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:
<!DOCTYPE html>
<html>
<body>
<h2>Menampilkan Properti Objek</h2>
<p id="demo"></p>
<script>
var person = {name:"John", age:50, city:"New York"};
document.getElementById("demo").innerHTML = person.name + "," + person.age + "," + person.city;
</script>
</body>
</html>
Menampilkan Objek dalam Loop
Properti suatu objek dapat dikumpulkan dalam satu loop.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JMenampilkan Properti Objek</h2>
<p id="demo"></p>
<script>
var x, txt = "";
var person = {name:"John", age:50, city:"New York"};
for (x in person) {
txt += person[x] + " ";
};
document.getElementById("demo").innerHTML = txt;
</script>
</body>
</html>
Anda harus menggunakan person[x] dalam loop.
person.x tidak akan berfungsi (Karena x adalah variabel).
Menggunakan Object.values()
Objek JavaScript apa pun bisa diubah menjadi array menggunakan Object.values().
Contoh:
var person = {name:"John", age:30, city:"New York"};
var myArray = Object.values(person);myArray sekarang menjadi array JavaScript, dan siap untuk ditampilkan:
<!DOCTYPE html>
<html>
<body>
<h2> Tampilan Objek JavaScript </h2>
<p> Object.values() mengonversi objek menjadi array. </p>
<p id="demo"></p>
<script>
var person = {name:"John", age:50, city:"New York"};
var myArray = Object.values(person);
document.getElementById("demo").innerHTML = myArray;
</script>
</body>
</html>
Object.values() didukung pada semua browser utama sejak tahun 2016.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 54 (2016) | 14 (2016) | 47 (2016) | 10 (2016) | 41 (2016) |
Menggunakan JSON.stringify()
Objek JavaScript apa pun dapat dirangkai (diubah menjadi string) dengan fungsi JavaScript JSON.stringify().
Contoh:
var person = {name:"John", age:30, city:"New York"};
var myString = JSON.stringify(person);myString sekarang menjadi string JavaScript, dan siap untuk ditampilkan.
<!DOCTYPE html> <html> <body> <h2>Tampilan properti objek JavaScript</h2> <p id="demo"></p> <script> var person = {name:"John", age:50, city:"New York"}; var myString = JSON.stringify(person); document.getElementById("demo").innerHTML = myString; </script> </body> </html>
Hasilnya adalah string yang mengikuti notasi JSON: {“name”: “John”, “age”: 50, “city”: “New York”}
JSON.stringify() disertakan dalam JavaScript dan didukung di semua browser utama.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Ya | 8.0 | 3.5 | 4.0 | 10.5 |
Stringify Date
JSON.stringify mengubah tanggal menjadi string.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2> Tampilan Objek JavaScript </h2>
<p>JSON.stringify akan mengubah tanggal menjadi string.</p>
<p id="demo"></p>
<script>
var person = {name:"John", today:new Date()};
var myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
</script>
</body>
</html>
Stringify Function
JSON.stringify tidak akan mengubah atau merangkai fungsi.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2> Tampilan Objek JavaScript </h2>
<p>JSON.stringify tidak akan merangkai fungsi.</p>
<p id="demo"></p>
<script>
var person = {name:"John", age:function () {return 30;}};
var myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
</script>
</body>
</html>
Hal ini dapat diperbaiki dengan cara mengubah fungsi menjadi string sebelum merangkainya.
<!DOCTYPE html>
<html>
<body>
<h2> Tampilan Objek JavaScript </h2>
<p>JSON.stringify tidak akan merangkai fungsi.</p>
<p id="demo"></p>
<script>
var person = {name:"John", age:function () {return 30;}};
person.age = person.age.toString();
var myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
</script>
</body>
</html>
Stringify Array
Cara ini juga memungkinkan untuk merangkai array pada JavaScript.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2> Tampilan Objek JavaScript </h2>
<p>JSON.stringify dapat merangkai array:</p>
<p id="demo"></p>
<script>
var arr = ["John", "Peter", "Sally", "Jane"];
var myString = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myString;
</script>
</body>
</html>
Hasilnya adalah string yang mengikuti notasi JSON: [“John”, “Peter”, “Sally”, “Jane”]
