CREATE PAGINATION VIEW FROM JSON API

Hi! thank for clicking this discussion.

I have some problem when i try to create pagination in Laravel project, i have JSON data from my Lumen project.

Here my Lumen JSON Response:

// 20211004195501
// http://localhost:8001/article/list?page=7

{
  "status": "success",
  "data": {
    "current_page": 7,
    "data": [
      {
        "id": 7,
        "user_id": 1,
        "slug": "simple-way-to-make-a-coffee-6",
        "title": "Simple Way To Make a Coffee",
        "body": "Fill a clean pan with a bit more water than you normally use when you brew your coffee. For example, if you use two cups of water, add an extra 3/4 cup this time. With this saucepan method, some water will be left in the pan, along with the grounds/sludge. Place the pan on your stove (or campfire) and turn on the heat.",
        "created_at": "2021-10-04T12:08:11.000000Z",
        "updated_at": "2021-10-04T12:08:11.000000Z",
        "user": {
          "id": 1,
          "name": "Muhammad Robbi Zulfikar",
          "username": "mrobbizulfikar",
          "email": "[email protected]",
          "province_id": 21,
          "city_id": 1,
          "subdistrict_id": 1,
          "created_at": "2021-10-04T08:43:51.000000Z",
          "updated_at": "2021-10-04T08:43:51.000000Z"
        },
        "article_categories": [
          {
            "id": 13,
            "article_id": 7,
            "name": "Drink",
            "created_at": "2021-10-04T12:08:11.000000Z",
            "updated_at": "2021-10-04T12:08:11.000000Z"
          },
          {
            "id": 14,
            "article_id": 7,
            "name": "America",
            "created_at": "2021-10-04T12:08:11.000000Z",
            "updated_at": "2021-10-04T12:08:11.000000Z"
          }
        ],
        "article_tags": [
          {
            "id": 13,
            "article_id": 7,
            "name": "#hotcoffee",
            "created_at": "2021-10-04T12:08:11.000000Z",
            "updated_at": "2021-10-04T12:08:11.000000Z"
          },
          {
            "id": 14,
            "article_id": 7,
            "name": "#new2021",
            "created_at": "2021-10-04T12:08:11.000000Z",
            "updated_at": "2021-10-04T12:08:11.000000Z"
          }
        ]
      }
    ],
    "first_page_url": "http://localhost:8001/article/list?page=1",
    "from": 7,
    "last_page": 12,
    "last_page_url": "http://localhost:8001/article/list?page=12",
    "links": [
      {
        "url": "http://localhost:8001/article/list?page=6",
        "label": "pagination.previous",
        "active": false
      },
      {
        "url": "http://localhost:8001/article/list?page=1",
        "label": "1",
        "active": false
      },
      {
        "url": "http://localhost:8001/article/list?page=2",
        "label": "2",
        "active": false
      },
      {
        "url": "http://localhost:8001/article/list?page=3",
        "label": "3",
        "active": false
      },
      {
        "url": "http://localhost:8001/article/list?page=4",
        "label": "4",
        "active": false
      },
      {
        "url": "http://localhost:8001/article/list?page=5",
        "label": "5",
        "active": false
      },
      {
        "url": "http://localhost:8001/article/list?page=6",
        "label": "6",
        "active": false
      },
      {
        "url": "http://localhost:8001/article/list?page=7",
        "label": "7",
        "active": true
      },
      {
        "url": "http://localhost:8001/article/list?page=8",
        "label": "8",
        "active": false
      },
      {
        "url": "http://localhost:8001/article/list?page=9",
        "label": "9",
        "active": false
      },
      {
        "url": "http://localhost:8001/article/list?page=10",
        "label": "10",
        "active": false
      },
      {
        "url": "http://localhost:8001/article/list?page=11",
        "label": "11",
        "active": false
      },
      {
        "url": "http://localhost:8001/article/list?page=12",
        "label": "12",
        "active": false
      },
      {
        "url": "http://localhost:8001/article/list?page=8",
        "label": "pagination.next",
        "active": false
      }
    ],
    "next_page_url": "http://localhost:8001/article/list?page=8",
    "path": "http://localhost:8001/article/list",
    "per_page": 1,
    "prev_page_url": "http://localhost:8001/article/list?page=6",
    "to": 7,
    "total": 12
  }
}

And here what i've tried, my current Laravel View: $articles = JSON Result

{{ $articles['data']->links() }} //Call to a member function links() on array
{{ $articles['data']->render() }} //Call to a member function links() on array

Thank you in advance.