How to split API response in a page

Hi all,
Wanted to brainstorm a bit on the best process for this. I have an API call that gives me for example the “Top 10 students of a course”.

When using a list in weweb, we can configure the list card to show the 10 results. But I would like to make in the following way:

Top 3 student cards are styled differently with a medal or badge, the other 7 cards will be styled normally. To add a but more complexity, between the top 3 and the remainder 7 student cards, I want to add a container/div that will just have a picture and a kind of “Honourable mentions below”. I don’t want though to make the API call static to “10” because I might have top 20 or top 30, depending on the course.

Scenario 1:

make a API call to 3 top positions and then another api call to rest of positions. But this involves 2 API calls

Scenario 2:

Define a first list filtering until index 3 of the list, then define another list filtering then from 4 to 10, this will make 1 API call and I will just filter on the frontend (if possible)

Scenario 2 seems the best way to proceed in terms of API calls and performance, but wondering if anyone has a different suggestion?

Thank you in advance.

Scenario 2 sounds like exactly what you want :slight_smile: