JSFiddle - React, Tailwind, and code Playground

by Mohd Zaki

HTML

<h1>Use Jquery</h1>
<div id="placeholder-jq"></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"
}
}
]};

var appenddata =[];
appenddata += '<table border="1">';
appenddata += '<tr>' +
'<th>Nama</th>' +
'<th>Jawatan/Gred</th>' +
'<th>No Telefon/Sambungan</th>' +
'<th>Bahagian</th>' +
'<th>Unit</th>';
'<tr/>';
$.each(data.pegawai, function(i, val) {
appenddata += "<tr>";
appenddata += "<td>" + val.namaPenuh + "</td>";
appenddata += "<td>" + val.jawatan + "(" + val.gred + ")</td>";
appenddata += "<td>" + val.noTelefon + "samb. " + val.sambungan + "</td>";
appenddata += "<td>" + val.bahagian.nama + "</td>";
appenddata += "<td>" + val.bahagian.unit + "</td>";
appenddata += "</tr>";
});
appenddata += "</table>";
$('#placeholder-jq').html(appenddata);