I wanted to achieve similar result as shown in below image.
Question: Looking for Jquery or javascript solution to dynamically displaying data results from left to right in table columns from json array.
Your help is much appreciated.
Here is my HTML & JSON format and what I am trying to achieve:
<table>
<tr>
<td rowspan='2'>ID</td>
<td rowspan='2'>Bagian</td>
<td colspan='12'>Tahun</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tbody id="zone_data">
</tbody>
const data =
{ result:
[ { TPM_MESIN_ID: 'CPU-20220115112327418526-20220122140952287412'
, KOMPONEN:
[ { TPM_MESIN_KOMPONEN_ID : '20220115112327418531-20220122140952462116'
, TPM_MESIN_KOMPONEN_NAMA : 'CPU01'
, BERKALA:
[ { TPM_BERKALA_ID: '20220127142100262686', TPM_BERKALA_JADWAL_MINGGU: 'M-1', TPM_BERKALA_JADWAL_BULAN: '1', TPM_BERKALA_PERIODE: '1' }
, { TPM_BERKALA_ID: '20220127154027581689', TPM_BERKALA_JADWAL_MINGGU: 'M-13', TPM_BERKALA_JADWAL_BULAN: '6', TPM_BERKALA_PERIODE: '2' }
, { TPM_BERKALA_ID: '20220129084334483646', TPM_BERKALA_JADWAL_MINGGU: 'M-28', TPM_BERKALA_JADWAL_BULAN: '9', TPM_BERKALA_PERIODE: '3' }
] }
, { TPM_MESIN_KOMPONEN_ID : '20220115112327418532-20220122140952272413'
, TPM_MESIN_KOMPONEN_NAMA : 'MNT01'
, BERKALA:
[ { TPM_BERKALA_ID: '20220127142100262698', TPM_BERKALA_JADWAL_MINGGU: 'M-2', TPM_BERKALA_JADWAL_BULAN: '1', TPM_BERKALA_PERIODE: '1' }
, { TPM_BERKALA_ID: '20220127142100262699', TPM_BERKALA_JADWAL_MINGGU: 'M-12', TPM_BERKALA_JADWAL_BULAN: '5', TPM_BERKALA_PERIODE: '2' }
, { TPM_BERKALA_ID: '20220127142100262700', TPM_BERKALA_JADWAL_MINGGU: 'M-31', TPM_BERKALA_JADWAL_BULAN: '10', TPM_BERKALA_PERIODE: '3' }
] }
, { TPM_MESIN_KOMPONEN_ID : '20220115112327418533-20220122140952428562'
, TPM_MESIN_KOMPONEN_NAMA : 'KYB01'
, BERKALA: []
} ] }
, { TPM_MESIN_ID: 'CPU-20220115112327418526-20220122140952287555'
, KOMPONEN:
[ { TPM_MESIN_KOMPONEN_ID : '20220115112327418531-20220122140952462117'
, TPM_MESIN_KOMPONEN_NAMA : 'CPU02'
, BERKALA:
[ { TPM_BERKALA_ID: '20220127142100262686', TPM_BERKALA_JADWAL_MINGGU: 'M-5', TPM_BERKALA_JADWAL_BULAN: '2', TPM_BERKALA_PERIODE: '1' } ]
} ] } ] }
function createRowHTML()
{
var tableContent = "";
for (var j = 0; j < data.result.length; j++)
{
}
$("tbody#zone_data").html(tableContent);
}
$(function(){createRowHTML();});