JSFiddle - React, Tailwind, and code Playground

by Alfred Huang

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]"}
            ]},{
                // Notice the differences HERE!
                "employees":[
                    {"employee":"name4", "id":"4", "email":"[email protected]"}
                ]
            }]
    }
};

var output="";

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