Cannot use navigation property in Ajax (ASP NET Core 6)

Question

When I perform an Ajax get request, the server returns something like this :

{
    "$id": "1",
    "$values": [
        {
            "$id": "2",
            "productItemsId": 30,
            "productId": 1,
            "colorId": 1,
            "productCode": "AFWhite",
            "image1": "",
            "image2": null,
            "image3": null,
            "image4": null,
            "color": {
                "$id": "3",
                "colorId": 1,
                "colorName": "Red",
                "colorHex": "#fa0000",
                "productItems": {
                    "$id": "4",
                    "$values": [
                        {
                            "$ref": "2"
                        }
                    ]
                }
            }
}

My problem is I can access the color navigation, here the code :

<script>
     $(document).on('change', '.ddlProductItemsId', function () {
         GetProductByColor($(this));
     });

     function GetProductByColor(selectedProductDropdown) {
         var productId = $(selectedProductDropdown).val(); 
         var colorDropdown = $(selectedProductDropdown).closest('tr').find('select[id="colorId"]'); 

         $.ajax({
             url: '@Url.Action("GetProductByColor", "Invoice")',
             type: 'GET',
             data: { id: productId },
             success: function (data) {
                 $(colorDropdown).empty(); 
                 $.each(data, function (index, item) {
                     
                     $(colorDropdown).append('<option value="' + item.colorId + '">' + item.color.colorName + '</option>');
                 });
             }
         });
     }
</script>

The view is always blank the view. I also include Color Navigation in the method

public async Task<JsonResult> GetProductByColorAsync (int id)
{   
    var list = _context.ProductItems.Where(n => n.ProductId == id)
        .Include(n => n.Color)
        .ToList();
    return Json(list);    
}

When I use console.log(data), I get: data

Is there anyway that I can solve this problem? I have tried many ways but it still doesn't work

If you try console.log(data), what is printed? Is it same as the JSON attached? If not,, can you share what is the printed result? Thanks. — Yong Shun
– Yong Shun, Commented Mar 23, 2024 at 4:05
If you console.log and see the JSON is same as attached, you need to change the loop function to: $.each(data["$values"], function (index, item) { ... }); Wondering there is ac action filter, middleware that change the response format. — Yong Shun
– Yong Shun, Commented Mar 23, 2024 at 4:12
Ya, replace data with data["$item"] in the $.each function should resolve your issue. — Yong Shun
– Yong Shun, Commented Mar 23, 2024 at 4:21

John · Accepted Answer · 2024-03-23 04:25:24Z

0

Solutions : Replace data with data["$item"] in the $.each function

answered Mar 23, 2024 at 4:25

John

878 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Cannot use navigation property in Ajax (ASP NET Core 6)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related