Using each to iterate over the passed in data - jquery-templates

Question

If an array is passed to a jquery template directly(without it being a property of an object) how do I iterate over it?
ex:
var hired=[{name:'Jack'}, {name:'Jack'}, {name:'Jack'}]
This is the data passed to the template below:
Template Start
<div>
<table>
{{each $data}}
<tr>
<td width="250" align="left">${$value.name}</th>
<td width="150" align="center">${$value.name}</th>
<td width="60" align="center">${$value.name}</th>
</tr>
{{/each}}
</table>
</div>
Template End
Since there is no property name to refer to the passed in data, I tried using $data but it doesn't work. How can I get access to the array here?
Thanks a lot.

Answer 1

If you pass an array to tmpl, it will automatically apply the template to each element. Isn't that what you want?
var hired = [{name:'Jack'}, {name:'Jack'}, {name:'Jack'}];
With template:
<script id="hired-template" type="text/x-jquery-tmpl">
<tr>
<!-- I think you originally closed these with 'th' by mistake. -->
<td width="250" align="left">${name}</td>
<td width="150" align="center">${name}</td>
<td width="60" align="center">${name}</td>
</tr>
</script>
<table id="hired-table"></table>
This should allow you to do:
$('#hired-template').tmpl(hired).appendTo('#hired-table');
And get:
<table id="hired-table">
<tr>
<td width="250" align="left">Jack</td>
<td width="150" align="center">Jack</td>
<td width="60" align="center">Jack</td>
</tr>
<tr>
<td width="250" align="left">Jack</td>
<td width="150" align="center">Jack</td>
<td width="60" align="center">Jack</td>
</tr>
<tr>
<td width="250" align="left">Jack</td>
<td width="150" align="center">Jack</td>
<td width="60" align="center">Jack</td>
</tr>
</table>
Of course, I'm not sure if you meant to have "Jack" appear a total of nine times; but that seems to be what your code would do if it worked.

Answer 2

HTML:
<table id="tableID">
</table>
javascript:
var hired=[{name:'Jack'}, {name:'Jimmy'}, {name:'Ron'}]
for( var i=0; i < hired.length; i++ ) {
$( "#tableID" ).append(
"<tr> \
<td width=\"250\" align=\"left\">" + hired[ i ].name + "</td> \
<td width=\"150\" align=\"center\"> " + hired[ i ].name + " </td> \
<td width=\"60\" align=\"center\"> " + hired[ i ].name + " </td> \
</tr>"
);
};
let me know if you can't understand something.