Click here to Skip to main content
15,846,860 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
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();
});
Posted

1 solution

Nothing is displayed because the code stops running when the error is thrown.

In javascript, the error "Cannot read properties of undefined" means you're trying to call a method or property of a variable that does not hold an object. You're trying to use an object that doesn't exist, or is null.

So, either data.data[i] returns null at index i, or the .data array doesn't exist on whatever the data object is.

Your for loop around that line starts at index 1, not 0. All indices for arrays place the first item at index 0, not 1. Your loop is enumerating indices 1 through 19, not 0 through 19. That means you're skipping the first item in the array.

Also, your data object says the array contains 10 items, at indices 0 through 9, not 20 items like your loop is hard coded to go though.
 
Share this answer
 
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900