Javascript

Menampilkan Objek di JS

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.

ChromeEdgeFirefoxSafariOpera
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.

ChromeEdgeFirefoxSafariOpera
Ya8.03.54.010.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”]


Catur Kurnia Sari

Share
Tags: javascript