使用Javascript / KendoUI自动完成呈现数据时出错 – 对象＃没有方法’slice’ – 如何解决？

我正在使用带有MVC4 WebAPI OData和EF文章的Using Kendo UI 。 安装KendoUI并确保设置所有引用后，我输入三个字符，并得到以下错误：

未捕获的TypeError：对象＃没有方法’slice’

问题的根源

通过更新来保存读取：通过调试我发现问题是JS希望解析数组中的数据 – 在根目录中不可用。 在数据层次结构中，它是一个级别。

原始问题

我清理了kendo.web.min.js，错误发生在第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小部件加载正常以及css：

我使用Razor MVC助手/扩展程序看到同样的错误：

 @(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 } ) ) 

并直接通过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() 

我确信这很简单，我可能会错过。 我已尝试使用Web和所有js文件。

任何援助将不胜感激。

– 更新 –

该内容中唯一缺少的真正html是

我创建了一个全新的解决方案和一个非常简单的视图，基于一个从http://api.geonames.org获取JSON数据的Kendo UI示例，并获得相同的错误。

我认为使用最新的JS库（ //ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js可能导致了问题所以我尝试了1.7 lib。同样的问题：

 @using Kendo.Mvc.UI @{ Layout = null; }              $(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(); } }) });    
  
   

– 更新 –

使用上面的代码，我回去再试一次 – 它工作正常。 经过几次尝试后，我遇到了同样的问题。 这是由于有效的JSON数据更改为以下内容：

 {"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}} 

…这导致我查看来自我的API的数据格式（在Fiddler中查看它：

代替：

JSON — {……数据……

它的

 JSON ---$id=1 ---$values ------{} ---------$id=2 ---------CREATEDATETIME... ---------EMAIL=[e-mail] ---------GROUPS ------------$id=... ------------$id=... ---------USERNAME=someusername ------{} ---------$id=4 . . . 

因此，错误是由于数组无法在预期的位置访问 – 而不是根，它是一个深度。

如何将数据绑定到一级深度而不是JSON对象的根？

谢谢。

Answer 1

我使用ComboBox时出现了与自动填充相同的错误。 在我的控制器中，return语句是

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

我改成了

 return Json(model, JsonRequestBehavior.AllowGet) 

这为我提供了根级别的数组，而不是一个级别。

Answer 2

解决方案是通过描述结果格式来遍历数据层次结构。

由于数组包含在$ values中，因此我使用了以下数据源/模式定义：

  // 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; } } }); 

一件好事是能够在Razor帮助器中添加数据模式类型 – 此时似乎不支持 。

因此，以下仍然不起作用：

 @(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 } ) ) 

Answer 3

这对我有用：

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

我的回复不是数组，我从服务器返回一个这样的响应对象：

 {"Field1":0,"Field2":0,"Field3":0} 

Answer 4

谢谢“brittongr”……这对我也有用。 但在我的情况下，它是不对的，我正在构建一个图表，一个图表需要一个数组当然，所以不是通过将我的Json数据转换为数组来改变模式，而是从我的操作返回一个包含一个元素的列表。 这样的事情如下。

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

我在我的Entities文件夹中定义了“graphicDataItem”类型，但通过查看它在代码中实例化的方式很容易获得。

Answer 5

我换了这个，这对我有用：

 @(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. }) 

）