Paginate array items in javascript

Question

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 perPage variable.

{
   "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"
   }]
 }

If the value of perPage is 5, this should shown as below

<div class="page"> 
  fruits
  vegetables
  paper
  books
  toys
</div>
<div class="page">
  electronics
</div>

and if the value of perPage is 2, there will be three div's with the class page. fruits and vegetables will be displayed in the first div, paper and books will be displayed in the second div, toys and electronics will be displayed in the third div.

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 ?

  <div class="wrapper">
<div v-for="(eachWidget, widgetName, index) in widgetData">
<div v-bind:class="((index != 0) && ((index%perPage) == 0))?'page':''" >
  <div class="widget">
    <p>{{ widgetName}}</p>
    <p class="card" v-for="(eachItem, index) in eachWidget">{{eachItem.from}}</p>
  </div>
</div>

this isnt object this is json. Pagination is usually done on server because performance. You can make pagination on client but it wont improve performance. That said you can do this on several ways. You can use splice or you can make for loop that uses something like this for(let i=0;i<perPage;i++), where perPage is variable outside of loop and you change it based on hoe many perpage elements you want — curious lad
– curious lad, Commented Feb 28, 2019 at 6:03
with vue you can use computed properties to format data the way you want. — curious lad
– curious lad, Commented Feb 28, 2019 at 6:04

Alizadeh118 · Accepted Answer · 2019-02-28 10:06:25Z

At first I calculated pages count based on items length and perpage number. After that, for each page I list items and check index of item in v-if:

new Vue({
    el: "#app",
    data: {
        perpage: 5,
        items: {
            "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"
            }]
        }
    },
    computed: {
        length() {
            return Object.keys(this.items).length
        },
        pages() {
            return Math.ceil(this.length / this.perpage)
        }
    }
})

// just to silent vue
Vue.config.productionTip = false;
Vue.config.devtools=false;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <label>per page:</label>
  <input type="number" v-model="perpage" min="1" :max="length">
  
  <ul v-for="n in pages">
    <li v-for="(item, title, index) in items"
    v-if="index >= perpage * (n-1)  && index < perpage * n">
      {{ title }}
    </li>
  </ul>
  
</div>

hope to help

Collectives™ on Stack Overflow

Paginate array items in javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related