I want paginate data in the JavaScript array. The number of products to be displayed on the page is 3. There will be pagination after every 3 products. But these pages should come when I make a request. Below is an example of for loop where I brought the page data.
Below is a sample JavaScript Array And Fiddle
//Products
var product = [{
"product_name": "Product 1",
"product_id": "8991",
"product_price": "$69",
categories: [{
categoryName: 'Tea'
}, {
categoryName: 'Coffee'
}],
},
{
"product_name": "Product 2",
"product_id": "8951",
"product_price": "29 TL",
categories: [{
categoryName: 'Tea'
}]
},
{
"product_name": "Product 3",
"product_id": "8941",
"product_price": "79 TL",
categories: [{
categoryName: 'Gift'
}, {
categoryName: 'Coffee'
}],
},
{
"product_name": "Product 4",
"product_id": "8931",
"product_price": "39 TL",
categories: [{
categoryName: 'Gift'
}, {
categoryName: 'Tea'
}],
},
{
"product_name": "Product 5",
"product_id": "8911",
"product_price": "49 TL",
categories: [{
categoryName: 'Gift'
}],
},
{
"product_name": "Product 6",
"product_id": "8971",
"product_price": "59 TL",
categories: [{
categoryName: 'Toys'
}, {
categoryName: 'Gift'
}, {
categoryName: 'Tea'
}],
},
{
"product_name": "Product 7",
"product_id": "8921",
"product_price": "69 TL",
categories: [{
categoryName: 'Coffe'
}, {
categoryName: 'Kahve'
}],
},
{
"product_name": "Product 8",
"product_id": "8431",
"product_price": "19 TL",
categories: [{
categoryName: 'Food'
}],
},
{
"product_name": "Product 9",
"product_id": "8438",
"product_price": "19 TL",
categories: [{
categoryName: 'Food'
}],
},
{
"product_name": "Product 10",
"product_id": "8440",
"product_price": "19 TL",
categories: [{
categoryName: 'Food'
}],
},
{
"product_name": "Product 11",
"product_id": "8441",
"product_price": "19 TL",
categories: [{
categoryName: 'Food'
}],
},
{
"product_name": "Product 12",
"product_id": "8442",
"product_price": "19 TL",
categories: [{
categoryName: 'Food'
}],
},
{
"product_name": "Product 13",
"product_id": "8444",
"product_price": "19 TL",
categories: [{
categoryName: 'Food'
}],
},
{
"product_name": "Product 14",
"product_id": "8445",
"product_price": "19 TL",
categories: [{
categoryName: 'Food'
}],
},
{
"product_name": "Product 15",
"product_id": "8446",
"product_price": "19 TL",
categories: [{
categoryName: 'Food'
}],
},
];
JavaScript Function
function getProducts(products = [], categoryName = 'Food') {
let result = [];
for (let product of products) {
if (product.categories === undefined || !Array.isArray(product.categories)) {
break;
}
for (let category of product.categories) {
if (category.categoryName === categoryName) {
result.push(product);
break;
}
}
}
return result;
}
JavaScript Loop
const categoryName = $(this).data('category');
const products = getProducts(product, categoryName);
for (let product of products) {
$(tab).append( "<p>Product name:"+product.product_name+"</p><p>Product Id:"+product.product_id+"</p><p>Price:"+product.product_price+"</p>");
}
