i want to do Pagination for View Page named ItemsList
data comes well in Console in browser
but it doesn't show on screen
What I have tried:
Array(10)
0
:
{itemId: 2, itemName: 'MacBook Pro', salesPrice: 1339.69, purchasePrice: 1205.72, categoryId: 1, …}
1
:
{itemId: 3, itemName: 'Macbook Air', salesPrice: 898.94, purchasePrice: 809.05, categoryId: 1, …}
2
:
{itemId: 4, itemName: '250 G6', salesPrice: 575, purchasePrice: 517.5, categoryId: 2, …}
3
:
{itemId: 5, itemName: 'MacBook Pro', salesPrice: 2537.45, purchasePrice: 2283.71, categoryId: 1, …}
4
:
{itemId: 6, itemName: 'MacBook Pro', salesPrice: 1900, purchasePrice: 1623.24, categoryId: 1, …}
5
:
{itemId: 7, itemName: 'Aspire 3', salesPrice: 400, purchasePrice: 360, categoryId: 3, …}
6
:
{itemId: 8, itemName: 'MacBook Pro', salesPrice: 2139.97, purchasePrice: 1925.97, categoryId: 1, …}
7
:
{itemId: 9, itemName: 'Macbook Air', salesPrice: 1158.7, purchasePrice: 1042.83, categoryId: 1, …}
8
:
{itemId: 10, itemName: 'ZenBook UX430UN', salesPrice: 1600, purchasePrice: 1345.5, categoryId: 4, …}
9
:
{itemId: 11, itemName: 'Swift 3', salesPrice: 770, purchasePrice: 693, categoryId: 3, …}
length
:
10
[[Prototype]]
:
Array(0)
the Error is
Items.js:19 Uncaught TypeError: Cannot read properties of undefined (reading '0')
in Line
htmlData += ClsItems.DrawItem(data.data[i]);
var ClsItems = {
GetAll: function () {
Helper.AjaxCallGet(
"https://localhost:7201/api/items",
{},
"json",
function (data) {
console.log(data);
if (data && Array.isArray(data)) {
$('#ItemPagination').pagination({
dataSource: data,
callback: function (data, pagination) {
var htmlData = "";
console.log(data);
for (var i = 1; i < 20; i++) {
htmlData += ClsItems.DrawItem(data[i]);
}
console.log(htmlData);
var d1 = document.getElementById('ItemArea');
d1.innerHTML = htmlData;
}
});
} else {
console.error("Invalid data format");
}
},
function () { }
);
},
DrawItem: function (item) {
console.log("item.imageName:", item.imageName);
var rowData = `<div class='col-xl-3 col-6 col-grid-box'>
<div class='product-box'>
<div class='img-wrapper'>
<div class='front'>
<a href="#"><img src="~/Uploads/Items/${item.imageName}" class="img-fluid blur-up lazyload bg-img" alt=""></a>
</div>
<div class="back">
<a href="#"><img src="~/Uploads/Items/${item.imageName}" class="img-fluid blur-up lazyload bg-img" alt=""></a>
</div>
<div class="cart-info cart-wrap">
<button data-toggle="modal" data-target="#addtocart" title="Add to cart">
class="ti-shopping-cart" title="Add to Wishlist" data-toggle="modal" data-target="#quick-view"> ^__i class="fa fa-star"> ^__i class="fa fa-star"> ^__i class="fa fa-star"></div>
<a href="product-page(no-sidebar).html">
<h6>${item["itemName"]}</h6>
</a>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type en book
</p>
<h4>${item.salesPrice ? item.salesPrice : 'No Data'}</h4>
<ul class="color-variant">
<li class="bg-light0"></li>
<li class="bg-light1"></li>
<li class="bg-light2"></li>
</ul>
</div>
</div>
</div>
</div>`;
return rowData;
}
};
$(document).ready(function () {
ClsItems.GetAll();
});