Error in pagination data doesn't shown on page

See more:

Javascript

Ajax

jQuery

API

, +

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();
});