Cara membuat objek data dan menampilkan nya di jquery


Pada kesempatan kali ini kita akan membuat object pada jquery. dimana nilai sebuah attribut dapat berubah secara dinamis secara langsung dapat berubah sesuai yang kita inginkan.

Contoh kita mempunyai Object data dengan bentuk seperti berikut : 

var object = { Id : 1, Nama : "Dani", Alamat : "Jakarta Barat", Hobby : "Menulis" };

cara mengambil datanya adalah  object.Id, object.Nama, object.Alamat 
Lalu kita tampilkan di halaman web dengan dari Jquery ke bentuk halaman web untuk script nya sebagai berikut : 

<!DOCTYPE html>

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>

var object = {

      Id : 1,

      Nama : "Dani",

      Alamat : "Jakarta Barat",

      Hobby : "Menulis"

  };

$(document).ready(function(){

   Reset()

});

function Reset(){

$("#txt-nama").val("")

$("#txt-alamat").val("")

$("#txt-hobby").val("")

}


function ShowData(){

$("#txt-nama").val(object.Nama)

$("#txt-alamat").val(object.Alamat)

$("#txt-hobby").val(object.Hobby)

}

</script>

</head>

<body>

<pre>

Nama : <input type="text" id="txt-nama" value="">

Alamat :

                  <textarea id="txt-alamat"></textarea>

Hobby : <input type="text" id="txt-hobby" value="">

</pre>

<button onClick="ShowData()">Show</button>

</body>

</html>

Keterangan :  

id="txt-nama", id="txt-alamat", id="txt-hobby"  Attribut id pada tag html tersebut adalah untuk penanda dimana pada saat button show di click maka akan muncul sesuai value yang di setting pada function ShowData() di script jquery sehingga data pada form dapat berubah

Posting Komentar

0 Komentar