[Solved] Please help me with paginating in Data view (from API call)

[kietnt.072binz]

I’m currently working on a travel application that helps users discover exciting places, find special foods, and locate places to buy gifts around their current location.

When the user taps the location button, the app fetches their location and makes an API call. Sometimes, this API response contains a large number of records, so I need to implement pagination. Here’s what the response structure looks like:

{
    "data": [
        {}
    ],
    "next_link": "?page=2",
    "prev_link": null,
    "total_pages": 6
}

I’m relatively new to Thunkable, and I’m actively studying Thunkable videos and searching for information on pagination. Unfortunately, I haven’t found a solution yet.

I’m aware that our community has many experienced members who might have encountered a similar challenge before. If you have any insights or advice, I would greatly appreciate your guidance.

Thank you so much for your assistance!

[tatiang]

Can you post a sample JSON response that contains multiple records?

[kietnt.072binz]

Thanks,
Please open the link: daff.json - Google Drive

[vishruth-ram]

Please send your layout in English

[ioannis]

Hello @kietnt.072binz
Welcome to the community!
You will need to add a loop and save the items into a list.
For example:

[kietnt.072binz]

Hi Ioannis,

I totally understand what you’re talking about. I’ve also been using a loop to go through the local data source line by line.

Here are the steps I’ve taken:

For the FIRST 20 RECORDS:

1. I wrote a call to fetch the first 20 records.
2. I used a loop to create 20 rows in the local data source.
3. Finally, I displayed them on the Data View Grid/List.

For the NEXT 20-40 RECORDS:
I’m considering a few options, and I’d love your input:

1. Should I create a loading button or somehow catch the pull-down action to retrieve more records? Then, I can continue to create the next 20 records in the local data source.
2. Or, is it better to create new screens to store batches of records, like 20-40-60-80, and so on?
3. Alternatively, should I delete all the rows in the local data source and replace them with the next set of records?

I’d really appreciate your advice on how to go about this. Thanks a lot for your help!

[kietnt.072binz]

Thank you so much, @vishruth-ram!

I apologize for any confusion. Those Vietnamese words were actually indicating the search results. I’ll make sure to use English next time.

[ioannis]

Hello @kietnt.072binz
Thank you for sharing more information.
You could add a button and a variable. Every time that you click on the button you will increase the variable and do a new API call to get the new page’s items and save them into the local Table.
I suggest using only one local table and a single data viewer list component and deleting the items each time you want to add new ones.

[kietnt.072binz]

@ioannis thank you so much.