JSFiddle - React, Tailwind, and code Playground

by Hifni Nazeer

HTML

<p>JSON to HTML Table</p>
<div id="table">
    
</div>

JavaScript

$(document).ready(
	function () {
    	var data=[
    		{"name" : "abc", "age" : 50, "hobby" : "cricket"},
            {"name" : "xyz", "age" : 50, "hobby" : "programming"},
    		{"name" : "hifni", "age" : 33, "hobby" : "rifle-shooting"},
		];
               
        var htmlStr = buildHtmlTable(data);
        
        $("#table").html(htmlStr);
    }
);

function buildHtmlTable(data) 
{
    var columns = getColumns(data);
    var columnHtml = getHtmlColumnHeaders(columns);
	var tableStr = '<table border="1">';
    var rowStr ='';
    
    for (var i = 0; i < data.length; i++) {
        
        var colStr ='';
        for (var colIndex = 0; colIndex < columns.length; colIndex++) 			{
            var cellValue = data[i][columns[colIndex]];

            if (cellValue == null) {
                cellValue = "";
            }
			
            colStr = colStr + '<td>' + cellValue + '</td>';
        }
        
        rowStr = rowStr + '<tr>' + colStr + '</tr>';
    }
    
    tableStr = tableStr + columnHtml + rowStr + '</table>';
    
    return tableStr;
}

// Adds a header row to the table and returns the set of columns.
// Need to do union of keys from all records as some records may not contain
// all records
function getColumns(data) {
    var columnSet = [];

    for (var i = 0; i < data.length; i++) {
        var rowHash = data[i];
        for (var key in rowHash) {
            columnSet.push(key);
        }
        break;
    }

    return columnSet;
}

function getHtmlColumnHeaders(columns) {
    var columnsHtml = '';

    for (var i = 0; i < columns.length; i++) {
        columnsHtml = columnsHtml + '<th>' + columns[0] + '</th>';
    }
    
    var htmlStr = '<tr>' + columnsHtml + '</tr>';

    return htmlStr;
}