Using JSON Pagination [JavaScript/AJAX Code]

JavaScript/AJAX code for JSON Pagination Example

What is JSON?

JSON (JavaScript Object Notation) is a textual data interchange format based on JavaScript. Like many other textual formats, JSON is easy for humans to read and computers for parsing. Despite its origins in JavaScript, this format is considered language-independent and can be used with almost any programming language. For many programming languages, there is ready-made code for creating and manipulating JSON data.

What is JSON Pagination?

Pagination is the process of dividing a document into separate sequential pages that are related and have similar content. For JSON, pagination refers to displaying a little chunk of data for a large dataset (for example, the first 100 results from an API response containing 1000 items). Pagination is commonly used in web applications to paginate large amounts of data and usually includes a navigation box for navigating to other pages.
The page number is usually passed as a URL parameter along with the page size parameter (to limit the number of items in the response) in the API request. If no page number is passed, the default is the first page. Some API providers may use other ways to provide the server with the page number and page size, such as a custom HTTP headers.

JSON API Pagination Example

Below is an example of a JSON request with pagination:

https://reqbin.com/echo/get/json?page=2&limit=50

Servers may have a default limit on the number of results in JSON. Still, instead of relying on this limit, it is recommended that you explicitly set the limit parameter in the API request to know exactly how many results will be in the JSON response.

How to get the previous and next pages when paginating the JSON?

Paginated JSON will usually have an object with links to the previous and next JSON pages. To get the previous page, you must send a request to the "prev" URL. To get to the next page, you must send a request to the "next" URL. This will deliver a new JSON with new results and new links for the next and previous pages.

...
"links": {
  "prev": "/echo/get/json?page=1&limit=50",
  "next": "/echo/get/json?page=3&limit=50"
}
...

How to know if there are more pages in the patinated JSON?

If the JSON response does not include a link to the next page, you have reached the end of the results. If there is no link to the previous page, you have reached the beginning of the results.

...
"links": {
  "prev": "/echo/get/json?page=99&limit=50"
}
...

See also

• JSON Payload Example
• JSON API Example