Limit how many API elements are rendered

Plasmic Studio Questions
1

Hi,

I am new to Plasmic and love it.
Currently I am playing around with dynamic values. So far so good.

I created an HTTP integration and fetch data from dummyjson.com.
In the next step I created a vertical stack and defined under “Repeat Element” > “Collection” to use the amount of elements the API fetched (30 Elements).

How could I now:

a) limit it to 6 Elements
b) create a pagination, so that it shows element 6-12?

Thanks!

Clemens

2

You could try the Table component to display your data with pagination.

Otherwise, you could try building it yourself with dynamic values.

  1. Make a state variable for the current page, starting at 0. In this example, we’ll call it currentPage.
  2. In the repeat element dynamic value, use JavaScript to “slice” the data, like data.slice($state.currentPage, $state.currentPage+6).
  3. Add a button to update the currentPage.
3

Thanks, but wouldn’t it be much more efficient to also limit the element I fetch via API?

Lets say there are 3.000 Items and I want to show 50 per page. It would be much better to only fetch 50, instead of all, every time.

Any way I can do that?

Thanks!

4

Yes it would be more efficient to this on the server. You can also use dynamic values in the data you pass to the API, so you can do something similar in your API call with a currentPage state variable. Just make sure your API supports pagination in the first place!

5

Thanks, I now figured it out! Well done how you integrated everything into Plasmic! :heart_eyes: