JAVASCRIPT
Consuming Paginated API Data with JavaScript
Implement JavaScript logic to fetch and display data from paginated APIs, handling 'next' page tokens or offset/limit parameters effectively.
async function fetchAllPages(initialUrl, currentPage = 1, allData = []) {
try {
const response = await fetch(`${initialUrl}?page=${currentPage}`); // Adjust query params based on API
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
// Assuming the API returns a 'data' array and 'next_page_url' or a way to determine more pages
allData.push(...data.items); // Or data.results, etc.
// Example 1: API provides 'next_page_url' (common for cursor-based pagination or simpler APIs)
// if (data.next_page_url) {
// return fetchAllPages(data.next_page_url, allData);
// }
// Example 2: API uses page numbers and provides 'total_pages' or 'has_more'
if (data.total_pages && currentPage < data.total_pages) {
return fetchAllPages(initialUrl, currentPage + 1, allData);
} else if (data.has_more) { // If 'has_more' flag is present
// You might need an 'offset' or 'last_id' parameter here instead of 'page'
// This example assumes 'page' can still increment even if it's 'has_more'
return fetchAllPages(initialUrl, currentPage + 1, allData);
}
return allData; // All pages fetched
} catch (error) {
console.error('Error fetching paginated data:', error);
throw error;
}
}
// Example usage:
// (async () => {
// try {
// // Adjust 'https://api.example.com/products' to your actual API endpoint
// // And adjust how pagination parameters are added (e.g., ?page=1 or ?offset=0&limit=10)
// const allProducts = await fetchAllPages('https://api.example.com/products');
// console.log('Total products fetched:', allProducts.length);
// // Display allProducts in your UI or process them
// } catch (e) {
// console.error('Failed to get all products:', e);
// }
// })();
// Alternative for client-side display with offset/limit
async function fetchPage(url, offset = 0, limit = 10) {
try {
const response = await fetch(`${url}?offset=${offset}&limit=${limit}`);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json();
} catch (error) {
console.error(`Error fetching page (offset: ${offset}):`, error);
throw error;
}
}
// Example usage for displaying specific pages:
// const apiUrl = 'https://api.example.com/users';
// let currentOffset = 0;
// const pageSize = 5;
// async function loadNextPage() {
// try {
// const pageData = await fetchPage(apiUrl, currentOffset, pageSize);
// console.log('Fetched page data:', pageData.items);
// // Append pageData.items to your UI
// currentOffset += pageSize;
// // You might disable 'next' button if pageData.items.length < pageSize or total count is reached
// } catch (e) {
// console.error('Could not load next page:', e);
// }
// }
// loadNextPage(); // Load first page
// setTimeout(loadNextPage, 3000); // Simulate loading next page later
How it works: This JavaScript snippet demonstrates two common strategies for consuming data from paginated APIs. The `fetchAllPages` function recursively fetches all available pages, suitable for scenarios where you need to process an entire dataset. It adapts to APIs providing either a `next_page_url` or using page numbers with `total_pages`. The `fetchPage` function, on the other hand, is designed for fetching data one page at a time using `offset` and `limit` parameters, which is more common for building interactive UIs where users navigate through pages. Both functions include basic error handling and illustrate how to construct API requests for pagination.