title: array iteration using jQuery templates
body: <p>I have a JavaScript array:</p>
  
  <pre><code>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"}
  </code></pre>
  
  <p>]</p>
  
  <p>and this is the template I intend to design:</p>
  
  <pre><code>&lt;div class="left"&gt;
       &lt;!-- Should display the first half of the rows --&gt;
       {{tmpl($data) "#someTemplate"}}
  &lt;/div&gt;
  &lt;div class="right"&gt;
      &lt;!-- Should display the rest half of the rows --&gt;
      {{tmpl($data) "#personTemplate"}}   
  &lt;/div&gt;
  
  &lt;script id="personTemplate" type="text/x-jquery-tmpl"&gt;
  {{each personDetails}}
      &lt;div class="person"&gt;
          &lt;div&gt;${firstName}&lt;/div&gt;
          &lt;div&gt;${lastName}&lt;/div&gt;
          &lt;div&gt;${city}&lt;/div&gt;
      &lt;/div&gt;
  {{/each}}
  </code></pre>
  
  <p></p>
  
  <p>How can I manipulate the array such that  contains first half of the rows and  contains second half of the rows.</p>
  
  <p>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.</p>
  
  <p>Thanks for reading. </p>