如何访问 ASP.NET Core 6 返回的 Json 中的导航图像属性

Question

这是我使用 Ajax 时返回的示例 JSON：

{
    "$id": "1",
    "$values": [
        {
            "$id": "2",
            "productId": 4,
            "productName": "DIOR",
            "categoryId": 3,
            "price": 400000,
            "description": null,
            "brand": 6,
            "brandNavigation": {
                "$id": "3",
                "brandId": 6,
                "brandName": "Dior",
                "products": {
                    "$id": "4",
                    "$values": []
                }
            },
            "category": {
                "$id": "5",
                "categoryId": 3,
                "categoryName": "HighHeels",
                "products": {
                    "$id": "6",
                    "$values": []
                }
            },
            "productItems": {
                "$id": "7",
                "$values": [
                    {
                        "$id": "8",
                        "productItemsId": 20,
                        "productId": 4,
                        "colorId": 1,
                        "image1": "0b07f121-dc27-4a9a-a79e-f440e0cf40ac_1.jpg",
                        "image2": "2ca4fa4f-27ba-43e5-8314-dff2cf16d59d_2.jpg",
                        "image3": "3ba8eb5d-e4a1-4277-b2f7-9a84861d6ceb_3.jpg",
                        "image4": "b7582534-e523-422f-875b-336a5200ea1f_4.jpg",
                        "color": null,
                        "product": null,
                        "productVariations": {
                            "$id": "9",
                            "$values": []
                        }
                    },
                    {
                        "$id": "10",
                        "productItemsId": 21,
                        "productId": 4,
                        "colorId": 3,
                        "image1": "965dfc4f-5748-4d6b-9e2f-f31fd175a485_23.jpg",
                        "image2": "732149b5-f0d1-48dd-9887-ffdea3d623a6_24.jpg",
                        "image3": "9be06dc9-d697-418d-a144-533e266d5fc7_21.jpg",
                        "image4": "08feffba-3a95-423d-be69-e36c1b050171_22.jpg",
                        "color": null,
                        "product": null,
                        "productVariations": {
                            "$id": "11",
                            "$values": []
                        }
                    }
                ]
            }
        },
 }

当我尝试访问 json 中的导航产品项时我的代码：

$.each(productlist["$values"], function (index, item) {
                newproductrow += '<div class="col-md-4 col-xs-6">';
                newproductrow += '<div class="product">';
                newproductrow += '<div class="product-img">';
                newproductrow += '<img src="~/Contents/img/' + item.productItems["$values"].image1 + '" width="200" height="200" alt="">';

但是它的未定义错误。逻辑工作正常，但我不知道访问它的正确语法。我使用聊天 gpt 和 copilot 但仍然不起作用。有谁知道正确的方法吗？ .谢谢你

Answer 1

在提供的数据中

item.productItems["$values"]

还包含一个数组，而不是单个项目，因此您需要对其进行相应处理，例如使用第一个数组elemnt：

newproductrow += '<img src="~/Contents/img/'
   + item.productItems["$values"][0].image1
   + '" width="200" height="200" alt="">';

或者您也可以使用

$.each

。