Berikut ini adalah contoh Penggunaan JSON pada JavaScript dan mengaplikasikannya dengan HTML.
// Data JSON
var data = {
"nama": "John Doe",
"umur": 25,
"pekerjaan": "Programmer"
};
// Mengubah data JSON menjadi string
var jsonString = JSON.stringify(data);
// Mengubah string JSON menjadi objek JavaScript
var jsonObject = JSON.parse(jsonString);
// Menampilkan data JSON di HTML
document.getElementById("nama").innerHTML = jsonObject.nama;
document.getElementById("umur").innerHTML = jsonObject.umur;
document.getElementById("pekerjaan").innerHTML = jsonObject.pekerjaan;Berikut ini adalah contoh kode HTML yang menggunakan JavaScript untuk mengaplikasikan data JSON ke dalam elemen HTML:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Menggunakan JSON dengan HTML</title>
</head>
<body>
<h1>Data Pribadi</h1>
<p>Nama: <span id="nama"></span></p>
<p>Umur: <span id="umur"></span></p>
<p>Pekerjaan: <span id="pekerjaan"></span></p>
<script src="script.js"></script>
</body>
</html>Pastikan Anda menyimpan kode JavaScript di dalam file dengan nama “script.js” dan file HTML di dalam file dengan nama “index.html”. Kemudian, buka file “index.html” di browser untuk melihat hasilnya.
Output:
See the Pen Penggunaan JSON pada JavaScript by WebbizID (@De-Orchids) on CodePen.
Dengan menggunakan JSON dalam JavaScript, Anda dapat dengan mudah mengelola dan mengirim data dalam format yang terstruktur. Anda dapat mengubah objek JavaScript menjadi string JSON menggunakan metode JSON.stringify(), dan mengubah string JSON menjadi objek JavaScript menggunakan metode JSON.parse(). Dengan demikian, Anda dapat mengirim data JSON dari server ke klien, atau sebaliknya, dengan mudah.
Dalam contoh di atas, kita menggunakan objek JSON yang berisi informasi pribadi seperti nama, umur, dan pekerjaan. Kemudian, kita mengubah objek JSON menjadi string JSON menggunakan JSON.stringify(), dan mengubah string JSON menjadi objek JavaScript menggunakan JSON.parse(). Setelah itu, kita mengaplikasikan data JSON ke dalam elemen HTML menggunakan JavaScript.
Dengan menggunakan JSON dalam JavaScript dan mengaplikasikannya dengan HTML, Anda dapat membuat aplikasi web yang dinamis dan interaktif dengan mudah. Anda dapat mengirim dan menerima data dalam format yang terstruktur, dan mengubah tampilan halaman web berdasarkan data yang diterima.
Selamat mencoba!
Leave a Reply