Customize Laravel API Pagination

Question

I'm attempting to make my API match this response:

{
    "data": [
        {
            "id": 1,
            "name": "Emma Smith",
            "avatar": "avatars/300-6.jpg",
            "email": "[email protected]",
            "position": "Art Director",
            "role": "Administrator",
            "last_login": "Yesterday",
            "two_steps": false,
            "joined_day": "10 Nov 2022, 9:23 pm",
            "online": false
        },
        {
            "id": 2,
            "name": "Melody Macy",
            "initials": {
                "label": "M",
                "state": "danger"
            },
            "email": "[email protected]",
            "position": "Marketing Analytic",
            "role": "Analyst",
            "last_login": "20 mins ago",
            "two_steps": true,
            "joined_day": "10 Nov 2022, 8:43 pm",
            "online": false
        },
        {
            "id": 3,
            "name": "Max Smith",
            "avatar": "avatars/300-1.jpg",
            "email": "[email protected]",
            "position": "Software Enginer",
            "role": "Developer",
            "last_login": "3 days ago",
            "two_steps": false,
            "joined_day": "22 Sep 2022, 8:43 pm",
            "online": false
        },
        {
            "id": 4,
            "name": "Sean Bean",
            "avatar": "avatars/300-5.jpg",
            "email": "[email protected]",
            "position": "Web Developer",
            "role": "Support",
            "last_login": "5 hours ago",
            "two_steps": true,
            "joined_day": "21 Feb 2022, 6:43 am",
            "online": false
        },
        {
            "id": 5,
            "name": "Brian Cox",
            "avatar": "avatars/300-25.jpg",
            "email": "[email protected]",
            "position": "UI/UX Designer",
            "role": "Developer",
            "last_login": "2 days ago",
            "two_steps": true,
            "joined_day": "10 Mar 2022, 9:23 pm",
            "online": false
        },
        {
            "id": 6,
            "name": "Mikaela Collins",
            "initials": {
                "label": "M",
                "state": "warning"
            },
            "email": "[email protected]",
            "position": "Head Of Marketing",
            "role": "Administrator",
            "last_login": "5 days ago",
            "two_steps": false,
            "joined_day": "20 Dec 2022, 10:10 pm",
            "online": false
        },
        {
            "id": 7,
            "name": "Francis Mitcham",
            "avatar": "avatars/300-9.jpg",
            "email": "[email protected]",
            "position": "Software Arcitect",
            "role": "Trial",
            "last_login": "3 weeks ago",
            "two_steps": false,
            "joined_day": "10 Nov 2022, 6:43 am",
            "online": false
        },
        {
            "id": 8,
            "name": "Olivia Wild",
            "initials": {
                "label": "O",
                "state": "danger"
            },
            "email": "[email protected]",
            "position": "System Admin",
            "role": "Administrator",
            "last_login": "Yesterday",
            "two_steps": false,
            "joined_day": "19 Aug 2022, 11:05 am",
            "online": false
        },
        {
            "id": 9,
            "name": "Neil Owen",
            "initials": {
                "label": "N",
                "state": "primary"
            },
            "email": "[email protected]",
            "position": "Account Manager",
            "role": "Analyst",
            "last_login": "20 mins ago",
            "two_steps": true,
            "joined_day": "25 Oct 2022, 10:30 am",
            "online": false
        },
        {
            "id": 10,
            "name": "Dan Wilson",
            "avatar": "avatars/300-23.jpg",
            "email": "[email protected]",
            "position": "Web Desinger",
            "role": "Developer",
            "last_login": "3 days ago",
            "two_steps": false,
            "joined_day": "19 Aug 2022, 10:10 pm",
            "online": false
        }
    ],
    "payload": {
        "pagination": {
            "page": 1,
            "first_page_url": "/?page=1",
            "from": 1,
            "last_page": 3,
            "links": [
                {
                    "url": null,
                    "label": "« Previous",
                    "active": false,
                    "page": null
                },
                {
                    "url": "/?page=1",
                    "label": "1",
                    "active": true,
                    "page": 1
                },
                {
                    "url": "/?page=2",
                    "label": "2",
                    "active": false,
                    "page": 2
                },
                {
                    "url": "/?page=3",
                    "label": "3",
                    "active": false,
                    "page": 3
                },
                {
                    "url": "/?page=2",
                    "label": "Next »",
                    "active": false,
                    "page": 2
                }
            ],
            "next_page_url": "/?page=2",
            "items_per_page": 10,
            "prev_page_url": null,
            "to": 10,
            "total": 21
        }
    }
}

Source - https://preview.keenthemes.com/theme-api/api/users/query/

Currently I'm using the standard Laravel pagination:

return Users::paginate();

However it does not break the JSON response down to what the frontend application I'm using is looking for which is:

"payload": {
        "pagination": {

Answer 1

You can achieve this by manually constructing the pagination data in the format required by your frontend application.

$users = Users::paginate();

// Extracting the pagination data from the paginator instance
$pagination = [
    'page' => $users->currentPage(),
    'first_page_url' => $users->url(1),
    'from' => $users->firstItem(),
    'last_page' => $users->lastPage(),
    'links' => array_map(function ($url, $page) use ($users) {
        return [
            'url' => $url,
            'label' => $page,
            'active' => $page == $users->currentPage(),
            'page' => $page
        ];
    }, $users->getUrlRange(1, $users->lastPage()), range(1, $users->lastPage())),
    'next_page_url' => $users->nextPageUrl(),
    'items_per_page' => $users->perPage(),
    'prev_page_url' => $users->previousPageUrl(),
    'to' => $users->lastItem(),
    'total' => $users->total(),
];

// Combine the users data and the pagination data into the desired structure
$response = [
    'data' => $users->items(), // Users data
    'payload' => [
        'pagination' => $pagination // Pagination data
    ]
];

return response()->json($response);

In this code:

• We retrieve the users using Users::paginate().
• Then, we manually construct the pagination data in the required format, using methods provided by Laravel's paginator instance.
• Finally, we combine the users data and the pagination data into the desired structure and return it as JSON response.

This pagination output matches the structure expected by your frontend application