'Dynamically displaying data results from left to right in table columns from json array

I wanted to achieve similar result as shown in below image.

Expected result:

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();});

Solution 1:^[1]

so what...?

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' } ] 
  } ] } ] } 

const
  zDataTable = document.querySelector('#zone_data')
, ref        = { TPM_MESIN_ID: '', row:null } 
  ;
data.result.forEach(r=>
  {
  if (ref.TPM_MESIN_ID !== r.TPM_MESIN_ID)
    {
    ref.TPM_MESIN_ID = r.TPM_MESIN_ID
    ref.row          = zDataTable.insertRow()
    Object.assign( ref.row.insertCell(), { textContent: r.TPM_MESIN_ID, rowSpan : r.KOMPONEN.length })
    }
  r.KOMPONEN.forEach((k,i)=>
    {
    if (!!i) ref.row = zDataTable.insertRow()
    ref.row.insertCell().textContent = k.TPM_MESIN_KOMPONEN_NAMA
    let arr = []
    for (let n=1;n<=12;++n) { arr[n] = ref.row.insertCell() }

    k.BERKALA.forEach( b => 
      Object.assign( arr[+b.TPM_BERKALA_JADWAL_BULAN], {textContent: b.TPM_BERKALA_JADWAL_MINGGU, className:'colored' }))
    })
  })

table {
  font             : 14px Arial, Helvetica, sans-serif;
  white-space      : nowrap;
  border-collapse  : separate;
  border-spacing   : 1px;
  background-color : darkblue;
  margin           : 1em; 
  }
th {
  padding          : .3em .6em; 
  background-color : lightsteelblue; 
  }
td { 
  padding          : .3em .6em; 
  background-color : whitesmoke;
  min-width        : 2em;
  vertical-align   : top;
  } 
td.colored {
  background-color : #00cbfc;
  }

<table>
  <thead>
    <tr>
      <th rowspan='2'>ID</th> <th rowspan='2'>Bagian</th> <th colspan='12'>Tahun</th>
    </tr>      
    <tr>
      <th>1</th>  <th>2</th>  <th>3</th>  <th>4</th>
      <th>5</th>  <th>6</th>  <th>7</th>  <th>8</th>
      <th>9</th> <th>10</th> <th>11</th> <th>12</th>
    </tr>
  </thead>
  <tbody id="zone_data"></tbody>
</table>

PO comment : can you make it in a loop like for (var j = 0; j < data.result.length; j++) {} ?

I will not do it. rather learn to use forEach loops, they have the merit of doing without a rarely useful index and of making the code more readable, and there is no real difficulty in understanding this transposition.

as example:

data.result.forEach(r=>
  {
// ... same code
  })

is the the as :

for (let j=0; j < data.result.length; j++) 
  {
  let r = data.result[j]
// ... same code
  }

Another reason is what you ask me is to degrade my code, which is against nature for any computer scientist: have look to :
https://www.commitstrip.com/en/2021/06/22/it-haunts-us/?setLocale=1
https://en.wikipedia.org/wiki/Code_refactoring

PO comment : Because I will model it into loop php

PHP and JavaScript are 2 DIFFERENT programming languages. if you wanted code in PHP, you had to indicate it in your question (with words, not with a tag). For my part, I will stop there, I gave you this code for free, but there are limits

Solution 2:^[2]

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 getTahunObj(obj) {
  newObj = {};
  obj.forEach((item) => {
    newObj[item["TPM_BERKALA_JADWAL_BULAN"]] = item.TPM_BERKALA_JADWAL_MINGGU;
  });
  return newObj;
}

function createTahunRow(data, length) {
  let tahunrow = "";
  for (let i = 1; i <= length; i++) {
    if (data[i]) {
      tahunrow += `<td class="tahun colored" rowspan="1">${data[i]}</td>`;
    } else {
      tahunrow += `<td class="tahun" rowspan="1"></td>`;
    }
  }
  return tahunrow;
}

function createRow(row) {
  let tableRow = ``;
  tableRow += `
      <tr>
        <td class="ID" rowspan="${row["KOMPONEN"].length + 1}">${row["TPM_MESIN_ID"]}</td>
      </tr>
    `;

  row["KOMPONEN"].forEach((bagian) => {
    tableRow += `<tr>`;
    tableRow += `<td class="Bagian" rowspan="1">${bagian["TPM_MESIN_KOMPONEN_NAMA"]}</td>`;
    tableRow += createTahunRow(getTahunObj(bagian["BERKALA"]), 12);
    tableRow += `</tr>`;
  });

  return tableRow;
}

function createRowHTML() {
  var tableContent = "";
  for (var j = 0; j < data.result.length; j++) {

    tableContent += createRow(data.result[j]);
  }
  $("tbody#zone_data").html(tableContent);
}

$(document).ready(() => {
  createRowHTML();
});

table {
  font: 14px Arial, Helvetica, sans-serif;
  white-space: nowrap;
  border-spacing: 1px;
  background-color: darkblue;
  margin: 1em;
}

th {
  padding: .3em .6em;
  background-color: lightsteelblue;
}

td {
  padding: .3em .6em;
  background-color: whitesmoke;
  min-width: 2em;
  vertical-align: top;
}

td.colored {
  background-color: #00cbfc;
}

table,
th,
tr,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th rowspan="2">ID</th>
      <th rowspan="2">Bagian</th>
      <th rowspan="1" colspan="12">Tahun</th>
    </tr>
    <tr>
      <th rowspan="1">1</th>
      <th rowspan="1">2</th>
      <th rowspan="1">3</th>
      <th rowspan="1">4</th>
      <th rowspan="1">5</th>
      <th rowspan="1">6</th>
      <th rowspan="1">7</th>
      <th rowspan="1">8</th>
      <th rowspan="1">9</th>
      <th rowspan="1">10</th>
      <th rowspan="1">11</th>
      <th rowspan="1">12</th>
    </tr>
  </thead>
  <tbody id="zone_data">
  </tbody>
</table>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2

'Dynamically displaying data results from left to right in table columns from json array

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]