JSFiddle - React, Tailwind, and code Playground

by Mohd Zaki

HTML

<h1>Use JavaScript</h1>
<div id="placeholder-js"></div>

JavaScript

var data = {"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
var output = '<table border="1">';
output += '<tr>' +
'<th>Nama</th>' +
'<th>Jawatan/Gred</th>' +
'<th>No Telefon/Sambungan</th>' +
'<th>Bahagian</th>' +
'<th>Unit</th>';
'<tr/>';
for (var i in data.pegawai) {
output += "<tr>";
output += "<td>" + data.pegawai[i].namaPenuh + "</td>";
output += "<td>" + data.pegawai[i].jawatan + "(" + data.pegawai[i].gred + ")</td>";
output += "<td>" + data.pegawai[i].noTelefon + "samb. " + data.pegawai[i].sambungan + "</td>";
output += "<td>" + data.pegawai[i].bahagian.nama + "</td>";
output += "<td>" + data.pegawai[i].bahagian.unit + "</td>";
output += "</tr>";
}
output += "</table>";
document.getElementById("placeholder-js").innerHTML = output;