JSFiddle - React, Tailwind, and code Playground

by JH Yap

HTML

<div id="container">
	<h2>Employee Data</h2>
	<table>
		<thead>
			<tr>
				<th>Item</th>
				<th>Name</th>
				<th>ID</th>
				<th>Email</th>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>

</div>

CSS

#container{
	margin: 0 0 0 0;
}
	#container table {
		border-collapse:separate;
		border-spacing:1px;
		background:#CCC;
	}
		#container table th {
			background:#EEE;
			font-weight:600;
			padding:10px 20px;
			text-align:center;
		}
		#container table tbody {
			padding:0; margin:0;
			border-collapse:collapse;
			border-spacing:0px;
		}
			#container table td {
				background:#FFF;
				padding:5px 10px;
				text-align:center;
			}

JavaScript

$(document).ready(function(){
    $('#container tbody').html(getEmployees());
});


var data = {"employeeSearch":
            {"employeeType":
             [    {"employees":
                       [    {"employee":"name1", "id":"1", "email":"[email protected]"},
                            {"employee":"name2", "id":"2", "email":"[email protected]"},
                            {"employee":"name3", "id":"3", "email":"[email protected]"}
                       ]},
                  {"employees":
                       {"employee":"name4", "id":"4", "email":"[email protected]"}}
             ]}};

var output="";

getEmployees = function() {
	var countItem = 0;

	    	for (var j = 0; j < data.employeeSearch.employeeType[0].employees.length; j++) {
				countItem++;
				output += "<tr><td>"+ countItem +"</td>" + 
							"<td>"+ data.employeeSearch.employeeType[0].employees[j].employee + "</td>" + 
							"<td>"+ data.employeeSearch.employeeType[0].employees[j].id +"</td>" + 
							"<td>"+ data.employeeSearch.employeeType[0].employees[j].email +"</td></tr>";
	    	}
    
            				output += "<tr><td>"+ (++countItem) +"</td>" + 
							"<td>"+ data.employeeSearch.employeeType[1].employees.employee + "</td>" + 
							"<td>"+ data.employeeSearch.employeeType[1].employees.id +"</td>" + 
							"<td>"+ data.employeeSearch.employeeType[1].employees.email +"</td></tr>";
          

	    return output;
	}

//alert(data.employeeSearch.employeeType[1].employees.employee);