Error when binding using AngularJS : TypeError: Unable to get property 'slice' of undefined or null reference

[Aarsh]

I was working on a Code-Library Project.
This is a sample ASP.NET Web API test application.

I do see the success callback function being called, and "data" does seem to carry the expected json object array.

TestContract.cs & TestContoller.cs

public class TestContract

{

    public int Id { get; set; }

    public string Name { get; set; }

    public string Description { get; set; }

}
​

public class TestController : ApiController

{

    private IEnumerable<TestContract> getTestData()

    {

        return (new TestContract[] {

            new TestContract{ Id = 1, Name = "Name 1", Description = "Description 1" },

            new TestContract{ Id = 2, Name = "Name 2", Description = "Description 2" },

            new TestContract{ Id = 3, Name = "Name 3", Description = "Description 3" },

            new TestContract{ Id = 4, Name = "Name 4", Description = "Description 4" },

            new TestContract{ Id = 5, Name = "Name 5", Description = "Description 5" }

        }).AsEnumerable();

    }

...

app.js ( AngularJS module definition )

var app = angular.module('app', ['kendo.directives']);

app.filter("asDate", function () {
    return function (input) {
        return new Date(input);
    }
});

TestService.js AngularJS Service

(function () {
    'use strict';

    angular
        .module('app')
        .service('TestService', ['$http', TestService]);

    function TestService($http) {
        this.getData = getData;

        function getData() {
            return $http.get(rootUrl + 'api/test');
        }
    }
})();

TestController.js AngularJS Controller

(function () {
    'use strict';

    angular
        .module('app')
        .controller('TestController', ['$scope', 'TestService', '$http', TestController]);


    function TestController($scope, service, $http) {
        $scope.title = 'TestController';

        $scope.testGridOptions = {
            columns: [
                { field: "Id", title: "Column 1" },
                { field: "Name", title: "Column 2" },
                { field: "Description", title: "Column 2" }
            ],
            dataSource: {
                schema: {
                    data: "d"
                },
                transport: {
                    read: function (e) {
                        service.getData().
                        success(function (data, status, headers, config) {
                            e.success(data)
                        }).
                        error(function (data, status, headers, config) {
                            alert('something went wrong in test grid')
                            console.log(status);
                        });
                    }
                },
                pageSize: 5
            }
        };
    }
})();

Index.cshtml

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>

<div data-ng-controller="TestController">

    <div>Controller: {{title}}</div>

    <div>Grid 2 Starts</div>
    <div data-kendo-grid="" data-k-options="testGridOptions"></div>
    <div>Grid 2 Ends</div>

</div>

Attachments :

1) Error.PNG
     shows the error I am getting in browser's Dev Tools console after sucess call back

2) transport service success callback has expected data.PNG
    showing the data-tip in Visual Studio with expected data.


If you'd like to investigate, I have a test application ready.
Please let me know if I have to remove something prior to upload.
I am not using any telerik's dlls but I do am using references to Kendo UI CDN libraries.

[Kiril Nikolov]

Hello Aarsh,

I guess the error is caused by the incorrect schema.data configuration. If I am not mistaken you return the data in array that is not wrapped in a object with key : "d". In this case you need to remove the schema.data configuration and the error should be resolved. If not then provide a runnable sample and we will be happy to help.

Regards,
Kiril Nikolov
Telerik

 

 

[Steven]

Hi, I have remote data which is returned in the following format and am trying to populate a kendo grid using angular.  I cant seem to get this to work because of the array/schema ("Solution Summaries").

 

{
    "SolutionSummaries": [
        {
            "SolutionId": 110,
            "QuotationId": 303718,
            "QuotationDate": "2015-04-10T16:47:29.0000000",
            "QuotationNumber": "1000303718",
            "VehicleDescription": "Audi A3 Diesel Saloon (2013 > Present) 1.6 Tdi 110 S Line 4Dr",
            "ReplacingRegistrationNumber": "",
            "Term": 12,
            "CsaRepayment": 289,
            "EmployeeContribution": 289,
            "Status": "Awaiting Driver Signature",
            "CanDownloadPif": false
        },
        {
            "SolutionId": 123,
            "QuotationId": 303748,
            "QuotationDate": "2015-04-14T07:04:27.0000000",
            "QuotationNumber": "1000303748",
            "VehicleDescription": "Audi A1 Diesel Sportback (2012 > 2015) 1.6 Tdi S Line 5Dr",
            "ReplacingRegistrationNumber": "",
            "Term": 12,
            "CsaRepayment": 258.7,
            "EmployeeContribution": 258.7,
            "Status": "Awaiting Driver Signature",
            "CanDownloadPif": false
        },
        {
            "SolutionId": 124,
            "QuotationId": 303749,
            "QuotationDate": "2015-04-14T07:06:36.0000000",
            "QuotationNumber": "1000303749",
            "VehicleDescription": "Audi A4 Diesel Avant (2012 > Present) 2.0 Tdi 150 S Line 5Dr",
            "ReplacingRegistrationNumber": "",
            "Term": 12,
            "CsaRepayment": 442,
            "EmployeeContribution": 442,
            "Status": "Awaiting Driver Signature",
            "CanDownloadPif": false
        },

 

My angular controller code:

 (function () {
    'use strict';

    angular
        .module('app')
        .controller('TestController', ['$scope', 'TestService', '$http', TestController]);


    function TestController($scope, service, $http) {
        $scope.title = 'TestController';

        $scope.testGridOptions = {
            columns: [
                { field: "QuotationId", title: "Quotation Id" },
                { field: "SolutionId", title: "Solution Id" },
                { field: "VehicleDescription", title: "Vehicle Description" }
            ],
            dataSource: {
                schema: {
                    data: "SolutionSummaries"
                },
                transport: {
                    read: function (e) {
                        service.getData().
                        success(function (data, status, headers, config) {
                                e.success(data);
                            }).
                        error(function (data, status, headers, config) {
                            alert('something went wrong in test grid')
                            console.log(status);
                        });
                    }
                },
                pageSize: 5
            }
        };
    }
})();

 

 Ive added some interceptors to the app.js and have uploaded a demo page here.  Does anyone know why I cant read the data from the API?

 http://dev.carbenefitsolutionstest.uk/Driver/PagesClientManagement/kendoangular-grid.html

 

[Kiril Nikolov]

Hello Steven,

I have managed to bind your data, without problems. Please see this example:

http://dojo.telerik.com/uNeQe

Regards,
Kiril Nikolov
Telerik