Geek Answers Handbook

Javascript / KendoUI autocomplete data rendering error - Object # <Object> does not have a “slice” method - how to solve it?

I follow Using the Kendo Interface with MVC4 WebAPI OData and EF . After installing KendoUI and providing all the links, I type three characters and get the following error:

Uncaught TypeError: Object # does not have a 'slice' method

The root of the problem

To keep reading the updates: through debugging, I found that the problem is that JS is waiting for the analysis of the array, where it is not available in the data - in the root. In the data hierarchy, it is on the same level.

Original problem

I cleared kendo.web.min.js and an error occurred around line 3498:

 success: function (n) { var i = this, r = i.options; return i.trigger(wt, { response: n, type: "read" }), n = i.reader.parse(n), i._handleCustomErrors(n) ? (i._dequeueRequest(), t) : (i._pristine = et(n) ? e.extend(!0, {}, n) : n.slice ? n.slice(0) : n, i._total = i.reader.total(n), i._aggregate && r.serverAggregates && (i._aggregateResult = i.reader.aggregates(n)), n = i._readData(n), i._pristineData = n.slice(0), i._data = i._observe(n), i._addRange(i._data), i._process(i._data), i._dequeueRequest(), t)

Kendo UI widgets load just like css:

 <link href="~/Content/kendo/kendo.common.min.css" rel="stylesheet" /> <link href="~/Content/kendo/kendo.default.min.css" rel="stylesheet" /> <script src="~/Scripts/jquery-1.9.1.min.js"></script> <script src="~/Scripts/kendo/kendo.web.min.js"></script> <script src="~/Scripts/kendo/kendo.aspnetmvc.min.js"></script> <script src="~/Scripts/appScripts.js"></script>

And I see the same error as using the Razor MVC helper / extension:

 @(Html.Kendo().AutoComplete() .Name("userAutoComplete") // specifies the "id" attribute of the widget .DataTextField("USERNAME") .DataSource(source => { source.Read(read => { read.Url("/api/user"); }) .ServerFiltering(true); // if true, the DataSource will not filter the data on the client } ) )

and directly through JS:

 /// <reference path="kendo/kendo.aspnetmvc.min.js" /> /// <reference path="kendo/kendo.core.min.js" /> /// <reference path="kendo/kendo.autocomplete.min.js" /> /// <reference path="kendo/kendo.web.min.js" /> $(document).ready(function () { // load up KendoUI // gets data from /api/user var dataSource = new kendo.data.DataSource({ transport: { read: { url: "/api/user" } } }); $("#userSearch").kendoAutoComplete({ dataSource: dataSource, dataTextField: "USERNAME", minLength: 3 }); $("#userSearch").on('input', function () { console.log($("#userSearch").val()); }); }); // $(document).ready()

I am sure that this is something simple that I might miss. I tried both on the Internet and in all js files.

Any help would be appreciated.

- UPDATE -

The only real html missing in this content is <input id="userAutoComplete" />

I created a completely new solution and a very simple view based on one example of the Kendo interface that gets JSON data from http://api.geonames.org and get the same error.

I thought using the new JS library ( //ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js might have caused the problem, so I tried 1.7 lib. Same problem:

 @using Kendo.Mvc.UI @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <link rel="stylesheet" href="@Url.Content("~/Content/kendo.common.min.css")"> <link rel="stylesheet" href="@Url.Content("~/Content/kendo.default.min.css")"> <link rel="stylesheet" href="@Url.Content("~/Content/kendo.dataviz.min.css")"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script src="@Url.Content("~/Scripts/kendo.web.min.js")"></script> <script src="@Url.Content("~/Scripts/kendo.aspnetmvc.min.js")"></script> <script src="@Url.Content("~/Scripts/kendo.dataviz.min.js")"></script> <script type="text/javascript"> $(document).ready(function () { $("#autoComplete").kendoAutoComplete({ minLength: 6, dataTextField: "title", filter: "contains", dataSource: new kendo.data.DataSource({ transport: { read: { url: "http://api.geonames.org/wikipediaSearchJSON", data: { q: function () { return $("#autoComplete").data("kendoAutoComplete").value(); }, maxRows: 10, username: "demo" } } }, schema: { data: "geonames" } }), change: function () { this.dataSource.read(); } }) }); </script> </head> <body> <div> <input id="autoComplete"/> </div> </body> </html>

- UPDATE -

Using the code above, I came back and tried again - it worked fine. Having stayed several more times, I ran into the same problem. This is because the actual JSON data changes as follows:

 {"status":{"message":"the daily limit of 30000 credits for demo has been exceeded. Please use an application specific account. Do not use the demo account for your application.","value":18}}

... which make me look at the formatting of the data coming from my API (looking at it in Fiddler:

Instead:

JSON --- {... data ...

it

 JSON ---$id=1 ---$values ------{} ---------$id=2 ---------CREATEDATETIME... [email protected] ---------GROUPS ------------$id=... ------------$id=... ---------USERNAME=someusername ------{} ---------$id=4 . . .

Thus, the error is caused by the fact that the array is not available where it expected - instead of the root, at the same level.

How to get data binding to a single-level, and not to the root of the JSON object?

Thanks.

+7
source share
5 answers

The solution to this was to access the data hierarchy by describing the format of the result.

Since the array is contained in $ values, I used the following data source / schema definition:

  // gets data from /api/user var dataSource = new kendo.data.DataSource({ transport: { read: { url: "/api/user" } }, schema: { // describe the result format data: function(data) { // the data which the data source will be bound to is in the values field console.log(data.$values); return data.$values; } } });

It would be nice to be able to add a data schema type in the Razor helper, which seems to be not supported at this time .

So the following will not work:

 @(Html.Kendo().AutoComplete() .Name("userAutoComplete") // specifies the "id" attribute of the widget .Filter("startswith") .Placeholder("Type user name...") .DataTextField("USERNAME") .DataSource(source => { source: source.Read(read => { read.Url("/api/user"); }) .ServerFiltering(true); // if true, the DataSource will not filter the data on the client } ) )
+3
source

I had the same error with ComboBox that I used as autocomplete. In my controller, the return statement was

 return Json(model.ToDataSourceResult(dataSourceRequest), JsonRequestBehavior.AllowGet)

which i changed to

 return Json(model, JsonRequestBehavior.AllowGet)

This provided an array at the root level, not one level for me.

+28
source

This worked for me:

 var dataSource = new kendo.data.DataSource({ transport: { read: { url: "api/dashboard" } }, schema: { **data: function (data) { return [data]; }** } });

My answer was not an array, I was returning a response object like this from the server:

 {"Field1":0,"Field2":0,"Field3":0}
+2
source

thanks "brittongr" ... it worked for me too. but in my case it’s wrong, I am building a chart, the chart needs an array, of course, so instead of changing the circuit by converting my Json data to an array, I just returned a list containing one element from my action. Something like this below.

 Random rand = new Random(); int numIterations = 0; numIterations = rand.Next(1, 1200); List aux = new List&lt;graphicDataItem&gt;(); aux.Add(new graphicDataItem { ColumnTotal = 1200, ColumnActives = numIterations, ColumnInactives = 1200 - numIterations, ColumnApprovedByMembers = 250, ColumnApprovedByAssoc = 300, XAxisData = DateTime.Now.Year }); return Json(aux, JsonRequestBehavior.AllowGet);

I have a type of "graphicDataItem" defined in my Entities folder, but it's easy to get by looking at how it is created in the code.

0
source

I am changing for this, and this work for me:

 @(Html.Kendo().AutoComplete() .Name("productAutoComplete") //The name of the autocomplete is mandatory. It specifies the "id" attribute of the widget. .DataTextField("myfield") //Specifies which property of the Product to be used by the autocomplete. .DataSource(source => { source.Custom() .Type("aspnetmvc-ajax") .Transport(transport=> { transport.Read("MyAction", "Control"); }) .Schema(schema=>schema.Data("Data").Total("Total")) .ServerFiltering(true); //If true the DataSource will not filter the data on the client. })

)

0
source

More articles:


All Articles