JSFiddle - React, Tailwind, and code Playground
by Mohd Zaki
HTML
<h1>Couple of Data</h1>
<div id="placeholder-1"></div>
<h1>Couple of Data with Sub-Data</h1>
<div id="placeholder-2"></div>JavaScript
/*Couple of Data*/
var data1 = {"pegawai": [
{
"namaPenuh": "Mohamad Safwan Haziq",
"jawatan": "Pembantu Tadbir",
"gred": "N17",
"noTelefon": "03-8888 0000",
"sambungan": 123
},
{
"namaPenuh": "Suzariah Mohamed",
"jawatan": "Pembantu Tadbir",
"gred": "N17",
"noTelefon": "03-8888 0000",
"sambungan": 321
}
]};
//DOM
document.getElementById("placeholder-1").innerHTML =
"<ul>" +
"<li>" + data1.pegawai[0].namaPenuh + "</li>" +
"<li>" + data1.pegawai[0].jawatan + "</li>" +
"<li>" + data1.pegawai[0].gred + "</li>" +
"<li>" + data1.pegawai[0].noTelefon + "</li>" +
"<li>" + data1.pegawai[0].sambungan + "</li>" +
"</ul>";
/*Couple of Data with Sub-Data*/
var data2 = {"pegawai": [
{
"namaPenuh": "Mohamad Safwan Haziq",
"jawatan": "Pembantu Tadbir",
"gred": "N17",
"noTelefon": "03-8888 0000",
"sambungan": 123,
"bahagian": {
"nama": "Bahagian Khidmat Pengurusan",
"unit": "Unit Personal"
}
},
{
"namaPenuh": "Suzariah Mohamed",
"jawatan": "Pembantu Tadbir",
"gred": "N17",
"noTelefon": "03-8888 0000",
"sambungan": 321,
"bahagian": {
"nama": "Bahagian Khidmat Pengurusan",
"unit": "Unit HRMIS"
}
}
]};
//DOM
document.getElementById("placeholder-2").innerHTML =
"<ul>" +
"<li>" + data2.pegawai[1].namaPenuh + "</li>" +
"<li>" + data2.pegawai[1].jawatan + "</li>" +
"<li>" + data2.pegawai[1].gred + "</li>" +
"<li>" + data2.pegawai[1].noTelefon + "</li>" +
"<li>" + data2.pegawai[1].sambungan + "</li>" +
"<li>" + data2.pegawai[1].bahagian.nama + "</li>" +
"<li>" + data2.pegawai[1].bahagian.unit + "</li>" +
"</ul>";