How to access navigation image properties in Json returned ASP.NET Core 6

Question

Here my example JSON return when I using Ajax :

{
    "$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": []
                        }
                    }
                ]
            }
        },
 }

My code when I try to access navigation productitems in 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="">';

But its undefined error. The logic work correctly but I don't know the right syntax to access it . I use chat gpt and copilot but still doesn't work. Does anyone know the right way ? .Thank you

Answer 1

In the provided data item.productItems["$values"] also contains an array, not a single item, so you need to process it accordingly, for example use the first array elemnt:

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

Or you can also use the $.each.