e.slice is not a function

Question

I have a kendoDropDownList using kendo UI and jquery. I have an error like this and don't know why I get this error.

$("#drpState").kendoDropDownList({
                optionLabel: "States...",
                delay: 10,
                dataTextField: "Name",
                dataValueField: "StateId",
                dataSource: {
                    serverFiltering: true,
                    transport: {
                        read: {
                            headers: {
                                "__RequestVerificationToken": $('input[name=__RequestVerificationToken]').val()
                            },
                            type: "Post",
                            dataType: "json",
                            url: "/Supervision/Tracking/GetStates",
                        }
                    }
                }
            }).data("kendoDropDownList");

        [HttpPost]
        public async Task<JsonResult> GetStates(DataSourceRequest request, CancellationToken cancellationToken = default)
        {
            request.Skip = 0;
            request.Take = 100;

            var states = await _stateService.GetStates(request, cancellationToken);

            return Json(states);
        }

the returned data is a DataSourceResult which contains Aggregates, Data and Total. Apparently, the Data has an array of objects as you see.

Ok, this doesn't say much. `e.slice()` is most probably `Array.prototype.slice()`, so something that is expected to be an array isn't. Does your back-end return an array? — GaloisGirl, Nov 04 '20 at 13:38
Could your back-end do ` return Json(states.Data);` so it returns an array? — GaloisGirl, Nov 04 '20 at 14:59
It worked. Thanks a lot. But why it happened? could you please explain it to me? Because the error wasn't clear at all. I really want to learn from my mistakes and it should be. — siavash bashiri, Nov 04 '20 at 18:08

score 3 · Accepted Answer · answered Nov 04 '20 at 18:42

3

That happens because Kendo expects an array from the request response, and its getting an object. You need to specify to Kendo where to find that array. Use schema.data on DataSource:

dataSource: {
    serverFiltering: true,
    transport: {
        read: {
            headers: {
                "__RequestVerificationToken": $('input[name=__RequestVerificationToken]').val()
            },
            type: "Post",
            dataType: "json",
            url: "/Supervision/Tracking/GetStates",
        }
    },
    schema: {
        data: "Data"
    }
}

Or you can do like @GaloisGirl proposed and return an array directly.

answered Nov 04 '20 at 18:42

DontVoteMeDown

21,122
10
69
105

Thank you for your answer but which approach is more secure? I mean is there a priority to use in case of security? – siavash bashiri Nov 04 '20 at 20:05
2

I think @DontVoteMeDown 's answer is a bit better, because the same back-end method can serve multiple front-end services, and you can say it's their job to adapt the data to their needs. Or you could say since the back-end service has a plural name, it should return something plural: an array. It's details, you'll be fine with either. – GaloisGirl Nov 04 '20 at 20:13
Additionally, we could use `JsonRequestBehavior.AllowGet` in the returned result previously as the second parameter to get a JSON format result, but now it omitted in ASP .Net Core because of security reasons called **JSON Hijacking** based on [JSON Hijacking](https://haacked.com/archive/2009/06/25/json-hijacking.aspx/) and [https://stackoverflow.com/a/9277717/10589806](https://stackoverflow.com/a/9277717/10589806) and now we need a pure collection of data includes of **key value** pairs to pass to KendoDropdownList. Am I right? @GaloisGirl @DontVoteMeDown – siavash bashiri Nov 05 '20 at 06:54
I don't use ASP.NET on my back-end and have no idea. – GaloisGirl Nov 05 '20 at 10:52
@siavashbashiri I think both ways are the same regarding security – DontVoteMeDown Nov 05 '20 at 11:00

e.slice is not a function

1 Answers1