Populate a Table with Array of Objects

by Joe Saad

HTML

<h1>Array of Objects</h1>

<table border="1">
	<thead>
		<tr>
			<th>Name</th>
			<th>Age</th>
			<th>Place of Birth</th>
			<th>City</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</tbody>
</table>

JavaScript

var employees=[];
employees[0]={name:"Ammar", age:28, pob: "Austria", city: "Houston"};
employees[1]={name:"Joe", age:32, pob: "Libya", city: "Austin"};
employees[2]={name:"Mouhanad", age:28, pob: "USA", city: "Seattle"};


for (var ode in employees[1]) {
                        console.log(employees[1][ode]);

                        
                    }


for (var i = 0; i <= employees.length; i++) {
   
                //$('tbody tr:nth-child('+i+') td:nth-child('+j+')').html(j);
    $('tbody tr:nth-child('+parseInt(i+1)+') td:nth-child('+1+')').html(employees[i]["name"]);
    $('tbody tr:nth-child('+parseInt(i+1)+') td:nth-child('+2+')').html(employees[i]["age"]);
    $('tbody tr:nth-child('+parseInt(i+1)+') td:nth-child('+3+')').html(employees[i]["pob"]);
    $('tbody tr:nth-child('+parseInt(i+1)+') td:nth-child('+4+')').html(employees[i]["city"]);
                
          
    
}