const $table = $('#zoneTable');
// creates Map object with zone names as keys and arrays of jQuery objects(cells) as values
const zoneMap = data.reduce((map, item) => {
const col = map.get(item.zone_name) || [createCell(item.zone_name)];
col.push(createCell(item.driver_id, item.ColorCode));
return map.set(item.zone_name, col);
}, new Map());
// convert Map values to array of arrays. Each sub array is a table column
const colCells = [...zoneMap.values()];
const totalRows = Math.max(...colCells.map(e => e.length));
for (let i = 0; i < totalRows; i++) {
const rowCells = colCells.map(col => col[i] || createCell());// fill any missing with empty cell
const $row = $('<tr>').append(rowCells);
$table.append($row)
}
// helper function to create cells
function createCell(text = '', color = null) {
const $td = $('<td>').text(text);
return color ? $td.css('background-color', color) : $td;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="zoneTable"></table>
<script>
var data = [{
"ColorCode": "green",
"StatusName": "ACTIVE",
"rankId": 0,
"zone_name": "Zone A",
"driver_id": 100,
"zone_rank": 1,
"status_id": null,
"company_id": null,
"updated_on": null,
"Driver": null,
"login_status": null
},
{
"ColorCode": "yellow",
"StatusName": "BREAK",
"rankId": 0,
"zone_name": "Zone B",
"driver_id": 101,
"zone_rank": 1,
"status_id": null,
"company_id": null,
"updated_on": null,
"Driver": null,
"login_status": null
},
{
"ColorCode": "green",
"StatusName": "ACTIVE",
"rankId": 0,
"zone_name": "Zone A",
"driver_id": 102,
"zone_rank": 4,
"status_id": null,
"company_id": null,
"updated_on": null,
"Driver": null,
"login_status": null
}
]
</script>