title: Paginate array items in javascript
body: <p>I have a javascript object that needs to be displayed in paged format. For example, from the below object, I need to display this as pages based on the value of <code>perPage</code> variable.</p>
  
  <pre><code>{
     "fruits":[
       {
         "from":"Shanghai",
         "to":"Houston",
         "createdOn":"2019-02-20 17:02:45",
         "threadId":"1234564534"
       },
       {
         "from":"Mumbai",
         "to":"Texas",
         "createdOn":"2019-02-22 17:02:45",
         "threadId":"223455678"
       }
     ],
     "vegetables":[{
       "from":"Barcelona",
       "to":"Milan",
       "createdOn":"2019-01-20 10:02:45",
       "threadId":"45673456"
     }],
     "paper":[{
       "from":"Kualalumpur",
       "to":"Singapore",
       "createdOn":"2019-02-01 12:02:45",
       "threadId":"234222345"
     },
     {
       "from":"Singapore",
       "to":"Vancover",
       "createdOn":"2019-01-20 11:02:45",
       "threadId":"6756434343"
     }],
     "books":[{
       "from":"Jibooty",
       "to":"Ahmedabad",
       "createdOn":"2019-02-10 17:02:45",
       "threadId":"23456789"
     }],
     "toys":[{
       "from":"Shanghai",
       "to":"Houston",
       "createdOn":"2019-02-20 14:02:45",
       "threadId":"123434343"
     }],
     "electronics":[{
       "from":"Somalia",
       "to":"Angora",
       "createdOn":"2019-02-20 17:02:45",
       "threadId":"667676767"
     }]
   }
  </code></pre>
  
  <p>If the value of <code>perPage</code> is 5, this should shown as below</p>
  
  <pre><code>&lt;div class="page"&gt; 
    fruits
    vegetables
    paper
    books
    toys
  &lt;/div&gt;
  &lt;div class="page"&gt;
    electronics
  &lt;/div&gt;
  </code></pre>
  
  <p>and if the value of <code>perPage</code> is 2, there will be three div's with the class <code>page</code>. <code>fruits and vegetables</code> will be displayed in the first <code>div</code>, <code>paper and books</code> will be displayed in the second <code>div</code>, <code>toys and electronics</code> will be displayed in the third div.</p>
  
  <p>I have prepared a basic code for this in vue js, but it failed in some cases. Can someone have a look at this and let me know where it went wrong ?</p>
  
  <pre><code>  &lt;div class="wrapper"&gt;
  &lt;div v-for="(eachWidget, widgetName, index) in widgetData"&gt;
  &lt;div v-bind:class="((index != 0) &amp;&amp; ((index%perPage) == 0))?'page':''" &gt;
    &lt;div class="widget"&gt;
      &lt;p&gt;{{ widgetName}}&lt;/p&gt;
      &lt;p class="card" v-for="(eachItem, index) in eachWidget"&gt;{{eachItem.from}}&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p> 
    </p>