访问$ .each（）中的项目

Question

I'm trying to use ajax to pull cart-items from the server to show them inside a cart when a customer clicks on "My Cart" button. Model for the cart:

public class Cart
    {
        [Key]
        public int RecordID { get; set; }
        public string CartID { get; set; }
        public int ItemID { get; set; }
        public int Count { get; set; }
        public int ItemPrice { get; set; }
        public System.DateTime DateCreated { get; set; }
        public virtual Item item { get; set; }
    }

Following is model for the Item:

public class Item
{
    [Key]
    public int ItemID { get; set; }
    public virtual Category Category { get; set; }
    public virtual Brand Brand { get; set; }
    public int CategoryID { get; set; } //Category ID
    public int BrandID { get; set; }
    public string ItemCode { get; set; }
    public string ItemName { get; set; }
    public string BrandName { get; set; }
    public string CategoryName { get; set; }
    public string SubCategoryName { get; set; }
    public string FurtherCategoryName { get; set; }
    public int? ItemPrice { get; set; }
    [DataType(DataType.ImageUrl)]
    public string ImageUrl { get; set; } 
}

This code in the view is being used to pull the cart-items from the server:

$("#cartLi")
    .click(function () {
        $.post("/ShoppingCart/cartDropDown",
            function (data) {
                if (data.ItemCount == 0) {
                    $('.no-items').text(data.Message);
                    $('.noItemsInCart').css('display', 'inline-block');
                }
                else {
                    $.each(data.CartItems, function () {
                        //how to relate to every `ItemName` in the cartItems to set text of a <p> element inside the cart div. 
                    }
                    )
                }
            })
    });

cartDropDown() is as following:

[HttpPost]
    public ActionResult cartDropDown()
    {
        var cart = ShoppingCart.GetCart(this.HttpContext);
        // Set up list of cart items with total value
        var viewModel = new ShoppingCartViewModel
        {
            CartItems = cart.GetCartItems(),
            CartTotal = cart.GetTotal(),
            ItemCount = cart.GetCount(),
            Message = Server.HtmlEncode("There are no items in your cart. Continue shopping.")
        };
        foreach (var item in viewModel.CartItems)
        {
            item.item = db.Items.Single(i => i.ItemID == item.ItemID);
        }
        return Json(viewModel);
    }

Everything is working as expected i.e., if there are 4 items inside a cart, they are pulled from the server by the above code successfully. Just can't figure out how I need to relate to those items one by one inside the ajax returned function.

Can someone please guide. Thanks

Answer 1

You should put param index and item for .each method.

$.each(data.CartItems, function (index, item) {
    let price = item.ItemPrice;
    let brand = item.item.BrandName;
    let itemname = item.item.ItemName;
    // append p tag here
    $(".cartdiv").append('<p>' + itemname + '</p>');
});