JSFiddle - React, Tailwind, and code Playground

by Joe Saad

HTML

<h1>Array of Objects</h1>

<table border="1">
	<thead>
		<tr>
			<th>1</th>
			<th>2</th>
			<th>3</th>
			<th>4</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:32, 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++) {
    
        
            //alert('sss'+employees[i][key] + " index of td "+ $(this).index() );

            // gives index = -1 in both cases why?
            for (var j=0; j<=4; j++) {
                //$('tbody tr:nth-child('+i+') td:nth-child('+j+')').html(j);
                $('tbody tr:nth-child('+parseInt(i+1)+') td:nth-child('+j+')').html(function(){ 
                    for (var key in employees[i]) {
                        alert('i: '+ i + ' ' +employees[i][key]);
                        return employees[i][key];
                        
                    }
                });
            }
    
}