使用 Javascript/KendoUI 自动完成渲染数据时出错 - 对象 #<Object> 没有方法“切片” - 如何解决？
Posted
技术标签:
【中文标题】使用 Javascript/KendoUI 自动完成渲染数据时出错 - 对象 #<Object> 没有方法“切片” - 如何解决？【英文标题】：Error rendering data with Javascript / KendoUI autocomplete - Object #<Object> has no method 'slice' - how to resolve? 【发布时间】：2013-07-24 01:26:46 【问题描述】：我正在关注Using Kendo UI with MVC4 WebAPI OData and EF 的文章。安装 KendoUI 并确保设置了所有引用后，我输入三个字符，并得到以下错误：
Uncaught TypeError: Object # has no method '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 都可以正常加载：
<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>
我在使用 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直接通过：
/// <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()
我确定这是我可能遗漏的一些简单的东西。我已经尝试过使用 web 和所有 js 文件。
任何帮助将不胜感激。
-- 更新--
该内容中唯一缺少的真正 html 是 <input id="userAutoComplete" />
我创建了一个全新的解决方案和一个非常简单的视图，基于从 http://api.geonames.org 获取 JSON 数据的一个 Kendo UI 示例，并得到相同的错误。
我认为使用最新的 JS 库（//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js 可能会导致问题，所以我尝试了 1.7 库。同样的问题：
@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>
-- 更新--
使用上面的代码，我返回并再次尝试 - 效果很好。再试几次后，我遇到了同样的问题。这是由于有效的 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=email@email.com
---------GROUPS
------------$id=...
------------$id=...
---------USERNAME=someusername
------
---------$id=4
.
.
.
所以错误是由于数组在预期的位置无法访问 - 而不是根，它是一层深。
如何将数据绑定到一级深度而不是 JSON 对象的根？
谢谢。
【问题讨论】：
您也可以发布您的 HTML 吗？ #userSearch 是 元素吗？ 【参考方案1】：解决方案是通过描述结果格式来遍历数据层次结构。
由于数组包含在 $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 帮助器中添加数据模式类型 - doesn't seem to be supported at this time。
因此，以下仍然行不通：
@(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
)
)
【讨论】：
【参考方案2】：这对我有用：
var dataSource = new kendo.data.DataSource(
transport:
read:
url: "api/dashboard"
,
schema:
**data: function (data)
return [data];
**
);
我的响应不是一个数组，我从服务器返回一个响应对象，如下所示：
"Field1":0,"Field2":0,"Field3":0
【讨论】：
【参考方案3】：我在使用 ComboBox 作为自动完成功能时遇到了同样的错误。在我的控制器中，返回语句是
return Json(model.ToDataSourceResult(dataSourceRequest), JsonRequestBehavior.AllowGet)
我改成了
return Json(model, JsonRequestBehavior.AllowGet)
这为我提供了根级别的数组，而不是深一层。
【讨论】：
就我而言，我使用的是 OData，并像这样实现它：whatsinyourlunch.com/odata-kendo-ui-entity-framework-webapi - 所以返回类型是 IEnumerable 或 IQueryable。【参考方案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”类型，但是通过查看它在代码中的实例化方式很容易获得。
【讨论】：
【参考方案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.
)
)
【讨论】：
以上是关于使用 Javascript/KendoUI 自动完成渲染数据时出错 - 对象 #<Object> 没有方法“切片” - 如何解决？的主要内容，如果未能解决你的问题，请参考以下文章
WordPress中怎么添加百度自动推送代码？创建完后上传到哪里？每个PHP模板
Dos批处理命令bat文件运行完以后自动关闭dos窗口的方法