Remote .Net Core - TypeError: cannot create property 'Id' on string

[Brendan]

I get this error when trying to bind remote data from a .Net Core endpoint  to jQuery UI Grid.



Im hitting a .Net Core endpoint which returns a List<MyModel>

[HttpGet("/api/[controller]/[action]/{applicationId}/")]
public async Task<IActionResult> GetProducts(int applicationId)
{
    //return List<MyModel>
    var products = await this._mortgageApplicationService.GetMortgageApplicationProducts(applicationId);
    var json = JsonConvert.SerializeObject(products);
    return Ok(json);
}

 

In jQuery UI i have following javascript method which tries to display the json results.
Note I recreated the products json object locally and it worked as shown in the method below.
Why doesn't it work from the remote end point?

function getReportData() {
    var applicationId = $("#MortgageApplicationId").val();
    var url = "/api/MortgageStageProductsApi/GetProducts/" + applicationId;

    //This does NOT work
    $("#productGrid").kendoGrid({
        dataSource: {
            transport: {
                read: url,
                dataType: "json"
            },
            schema: {
                model: {
                    id: "Id",
                    fields: {
                        Id: { type: "number" },
                        ProductProvider: { type: "string" },
                        ProductTypeName: { type: "string" },
                        MortgageExpiry: { type: "string" }
                    }
                }
            },
            pageSize: 20,
            serverPaging: false,
            serverFiltering: false,
            serverSorting: false
        },
        filterable: true,
        sortable: true,
        pageable: false,
        columns: [{
            field: "Id",
            filterable: false
        }, {
            field: "ProductProvider",
            title: "Provider"
        }, {
            field: "ProductTypeName",
            title: "Product Type"
        }, {
            field: "MortgageExpiry",
            title: "Expiry"
        }
        ]
    });


    //This works using json object created using the same json returned
    var products = [
        {
            Id: 1,
            MortgageApplicationId: 2171,
            ProductProvider: "Ulster Bank",
            MortgageTermYears: 5,
            MortgageTermMonths: 10,
            MortgageRepaymentType: 1,
            ProductTypeId: 1,
            ProductTypeName: "Fixed",
            MortgageProductTermYears: 5,
            MortgageExpiry: "2025-01-21T00:00:00",
            MortgageLenderRate: null,
            MortgageAdviceFee: 120,
            ProductBrokerCommissionPercentage: 10,
            ProductBrokerCommissionFlatFee: null,
            DocumentsUploadedList: []
        },
        {
            Id: 2,
            MortgageApplicationId: 2171,
            ProductProvider: "Ulster Bank",
            MortgageTermYears: 5,
            MortgageTermMonths: 10,
            MortgageRepaymentType: 1,
            ProductTypeId: 1,
            ProductTypeName: "Fixed",
            MortgageProductTermYears: 5,
            MortgageExpiry: "2025-01-21T00:00:00",
            MortgageLenderRate: null,
            MortgageAdviceFee: 120,
            ProductBrokerCommissionPercentage: 10,
            ProductBrokerCommissionFlatFee: null,
            DocumentsUploadedList: []
        }
    ];

    $("#productGrid1").kendoGrid({
        dataSource: {
            data: products,
            schema: {
                model: {
                    id: "Id",
                    fields: {
                        Id: { type: "number" },
                        ProductProvider: { type: "string" },
                        ProductTypeName: { type: "string" },
                        MortgageExpiry: { type: "string" }
                    }
                }
            },
            pageSize: 20,
            serverPaging: false,
            serverFiltering: false,
            serverSorting: false
        },
        filterable: true,
        sortable: true,
        pageable: false,
        columns: [{
            field: "Id",
            filterable: false
        }, {
            field: "ProductProvider",
            title: "Provider"
        }, {
            field: "ProductTypeName",
            title: "Product Type"
        }, {
            field: "MortgageExpiry",
            title: "Expiry"
        }
        ]
    });
}

[Brendan]

Got an answer but not sure why above dosnt work.

function populateProductsTable() {
        var applicationId = $("#MortgageApplicationId").val();
        var url = "/api/MortgageStageProductsApi/GetProducts/" + applicationId;

        $("#productGrid").kendoGrid({
            dataSource: {
                type: "json",
                transport: {
                    read: function (options) {
                        $.ajax({
                            url: url,
                            dataType: "json",
                            success: function (result) {
                                options.success(result);
                            }
                        });
                    },
                },
                schema: {
                    model: {
                        id: "Id",
                        fields: {
                            Id: { type: "number" },
                            ProductProvider: { type: "string" },
                            ProductTypeName: { type: "string" },
                            MortgageExpiry: { type: "string" }
                        }
                    }
                },
                pageSize: 50,
                serverPaging: false,
                serverFiltering: false,
                serverSorting: false
            },
            filterable: true,
            sortable: true,
            pageable: false,
            columns: [{
                field: "Id",
                filterable: false
            }, {
                field: "ProductProvider",
                title: "Provider"
            }, {
                field: "ProductTypeName",
                title: "Product Type"
            }, {
                field: "MortgageExpiry",
                title: "Expiry"//,
                /*format: "{0:MM/dd/yyyy}"*/
            }
            ]
        });
    }

[Georgi Denchev]

Hi, Brendan,

I am glad you've been successful in resolving the problem!

I can't see anything wrong with the first snippet either. You mentioned that the Grid was loading successfully when you manually recreated the JavaScript array. Would it be possible for you to share a screenshot from the Network Tab in the DevTools where the response can be seen?

On a side note, could you try returning the Json directly?

return Json(products); // instead of manually serializing and then returning an Ok response.

Best Regards,

Georgi