从 mvc 控制器返回 json 仅显示页面列表中的最后一项

Question

我正在尝试使用 json 从 MVC 控制器获取数据，我可以获取数据并将其显示在警报中，但是当我尝试在页面上显示它时，它只显示列表中的最后一项从控制器返回。

谁能看到我哪里出错了，我的代码如下：

$.ajax({
        url: url,
        data: { jsonJewelleryType: ddlJewelleryType },
        cache: false,
        type: "POST",
        dataType: "json",
        error: function (request) {
            alert(request.responseText);
        },
        success: function (data) {
            var items = data;
            $.each(items,function (i, item) {
                $.each(item,
                    function (key, value) {
                        $("#catalog-items").html("<div class=\"row\"><h4>" + key + " " + value + "</h4></div>");
                        alert(key + " " + value);
                    });
            });
        }
    });

Json 返回

/------------------------来自 Chrome 的控制台代码----------------

>     1.    {CatalogProducts: Array(1), Pager: {…}, NumberOfRecordsPerPage: 10}
>     1.    CatalogProducts:Array(1)
>     1.    0:
>     1.    CatalogImages:Array(4)
>     1.    0:"image1.jpg"
>     2.    1:"image2.jpg"
>     3.    2:"image3.jpg"
>     4.    3:"image4.jpg"
>     5.    length:4
>     6.    __proto__:Array(0)
>     2.    Description:"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 specimen book. It has survived
> not only five centuries, but also the leap into electronic
> typesetting, remaining essentially unchanged."
>     3.    DiamondQuality:"Whats This"
>     4.    Image1:null
>     5.    Image2:null
>     6.    Image3:null
>     7.    Image4:null
>     8.    JewelleryType:"Earring"
>     9.    Metal:"9ct Yellow Gold"
>     10.   Price:"299.99"
>     11.   Title:"9ct Yellow Gold Diamond Cluster Stud Earring (1.00ct)"
>     12.   __proto__:Object
>     2.    length:1
>     3.    __proto__:Array(0)
>     2.    NumberOfRecordsPerPage:10
>     3.    Pager:{StartPage: 1, CurrentPage: 1, PageSize: 10, TotalItems: 1, TotalPages: 1, …}
>     4.    __proto__:Object

Answer 1

通过执行$("#catalog-items").html("<div class=\"row\"><h4>" + key + " " + value + "</h4></div>");，您每次通过时都会重置catalog-items div 的html。

尝试使用：

$("#catalog-items").append("<div class=\"row\"><h4>" + key + " " + value + "</h4></div>");