array iteration using jQuery templates

Question

I have a JavaScript array:

var personDetails = [
{firstName: "Anup", lastName: "Vasudeva", City: "Delhi"},
{firstName: "Vikas", lastName: "Kumar", City: "Banglore"},
{firstName: "Dannis", lastName: "Richie", City: "Texas"},
{firstName: "Ajay", lastName: "Sharma", City: "Pune"},
{firstName: "Deepak", lastName: "Aggarwal", City: "Delhi"},
{firstName: "Ajay", lastName: "Sharma", City: "Banglore"}

]

and this is the template I intend to design:

<div class="left">
     <!-- Should display the first half of the rows -->
     {{tmpl($data) "#someTemplate"}}
</div>
<div class="right">
    <!-- Should display the rest half of the rows -->
    {{tmpl($data) "#personTemplate"}}   
</div>

<script id="personTemplate" type="text/x-jquery-tmpl">
{{each personDetails}}
    <div class="person">
        <div>${firstName}</div>
        <div>${lastName}</div>
        <div>${city}</div>
    </div>
{{/each}}

How can I manipulate the array such that contains first half of the rows and contains second half of the rows.

EDIT: Actually the thing is that the user will pass the array as is and it is the templating logic that will slice the array in two equal halves.

Thanks for reading.

Answer 1

Don't use the templating to manipulate the data in this way. Do it externally before you provide the user given array to the templating. The reason why you don't want to do this is because if you leave to templating to handle such logic it would be utterly slower than doing it externally. This would not be notisable for arrays of 10-20 items, but if the array becomes large for one reason or another then the templating would be notisably slower.