Please How do I limit a repeater results number

Ask the community
,
1

I have a repeater that is not connected to a dataset but I filled it up using onItemReady code, how do I limit the number of repeater results to 12 per page and also get the total results of all the returns from the database eg: 45 results, and connect pagination to move from page to page?

2

You can do it in different ways.

  1. You can use the results of a query + limit the results directly inside the query…
    https://www.wix.com/velo/reference/wix-data/wixdataquery/limit

  2. Or you can do it manual way, cutting your RESULT-ARRAY of OBJECTS into pieces.

ARRAY = [ {OBJECT-1}, {OBJECT-2}, {OBJECT-3}]
This is how your RESULT-ARRAY of OBJECTS normaly looks like, when you push the data to your REPAETER… (in this example an Array of two Objects).

[
  {
    "_id": "1",
    "firstName": "John",
    "lastName": "Doe",
    "image": "http://someImageUrl/john.jpg"
  },
  {
    "_id": "2",
    "firstName": "Jane",
    "lastName": "Doe",
    "image": "http://someImageUrl/jane.jpg"
  }
]

What you would get when console-logging your ARRAY with the following code…

let myRESULT = ARRAY[0] ---> ?

Exactly you would get the first OBJECT-DATA out of your ARRAY, including all values of selected object.

So you want now to limit your RESULTS / ARRAY-length?
By the way → which length does have the ARRAY in this example?
Yes, exactly → LENGTH = 2 → because 2-Objects are inside this ARRAY!

So let’s say you have 100-Objects inside your ARRAY → ARRAY-LENGTH = 100;

You want to limit RESULTS? How to do that?

Hmmmmmm? :roll_eyes: Perhaps we use a simple loop? Using the start-value and the length of the Array.

But before i will expand all my theoretical thoughts on this, i would suggest you to go the first way → using .limit() + .skip() directly on a query.

3

Thanks for the response, I tried .limit(12), that did not work, I tried splicing the array of objects returned from the query (res.items).splice(0,12) hoping to use a next and back button to do new queries and altering the splice values, the splice returned 12 objects in an array out of my total 15 which is expected in console.log but, $w(“#repeaterx”).data = (res.items).splice(0,12) took all the 15 and displayed them.

4

Normaly the described way should work.
First play around and do some testings → splitting/cutting/slicing/splicing/shifting/unshifting or pushing an ARRAY or it’s values the right way → generating a new ARRAY/ARRAY-DATA (including OBJECTS)

Then after you have successfuly done it → just push your new generated DATA to your REPEATER…

$w('#REPEATER').data = myNewGeneratedArrayData;

Always take care that your ARRAY has the following FORMAT…

Array[{object},{object},{object}]
5

Done all, the console.log returns what I expect, an array of objects [{},{}] but the repeater exceeds the limits

6

The REPEATER can’t exeeding the limits.

An example!

Your STARTING-ARRAY: → startArray=[a,b,c,d,e,f,g,h,i,j,k,l,m,n]
Now you want to generate a function, which will get with every click onto a button the next 3-items.

  1. Click-1: → startArray =[ a,b,c ,d,e,f,g,h,i,j,k,l,m,n]
  2. Click-2: → startArray =[a,b,c, d,e,f ,g,h,i,j,k,l,m,n]
  3. Click-3: → startArray =[a,b,c,d,e,f, g,h,i ,j,k,l,m,n]

What you will have to know?

  1. Lenght of the startingArray → 14
  2. stepLength = 3 (3-step counting);
  3. startingPoint/startingValue = 0
  4. Counter → increases by (1) every click.

And of course you generate a completely NEW-ARRAY out of the old starting one…

const slicedArray = startArray.slice(0, stepLength*counter);

1-click → counter=1 —> 1xstepLength (1x3) = 3
2-click → counter=2 —> 2xstepLength (2x3) = 6
3-click → counter=3 —> 3xstepLength (3x3) = 9
4-click → counter=4 —> 4xstepLength (4x3) = 12
First step of your function already done!

Your new ARRAY will allways be filled the following way…
[a,b,c]
[a,b,c,d,e,f]
[a,b,c,d,e,f,g,h,i]
[a,b,c,d,e,f,g,h,i,j,k,l]
…and so on.

But still something missing, right? (You may surely want to kill every first 3-values of each next step…
[a,b,c]
[a,b,c,d,e,f]
[a,b,c,d,e,f,g,h,i]
[a,b,c,d,e,f,g,h,i,j,k,l]

So your results would be → [a,b,c], [d,e,f], [g,h,i], [j,k,l]… and so on…(everytime running your generated function.

Now, your turn! :wink: Complete the function!
There are surely a lot of possible solutions!

7

The idea is to add 2 elements that takes the lower limit and upper, a, b, then equate a=0 and b to 12, when the next button is clicked a query is done and a and b are feed into the splice parameter that cuts the array of objects result, a=a+12, b=b+12, same happens to the back button a= a-12, b=b-12, this remains true as long as the range between the buttons are not exceeded eg: if a<=0 then back button is disabled, if b>=results.items.length then next button is disabled.