javascript - 使用 Javascript/KendoUI 自动完成渲染数据时出错 - 对象 #

Question

I am following the Using Kendo UI with MVC4 WebAPI OData and EF article. After installing KendoUI and making sure all references are set, I type in three characters, and get the following error:

Uncaught TypeError: Object # has no method 'slice'

Root of the Problem

To save reading through the updates: Through debugging I found that the issue is that JS is expecting to parse an array, where it isn't available in the data - at the root. In the data hierarchy, it's one level in.

Original Problem

I cleaned up kendo.web.min.js and the error is occuring 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)

The Kendo UI widgets are loading just fine as well as the 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 am seeing the same error both with 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 through 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'm sure this is something simple that I may be missing. I have tried both with the web and all js files.

Any assistance would be appreciated.

-- UPDATE --

The only real html missing from that content is the <input id="userAutoComplete" />

I created a brand new solution and a very simple view, based on one of the Kendo UI examples that gets JSON data from http://api.geonames.org, and getting the same error.

I thought that using the newest JS library (//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js may have been causing a problem so I tried the 1.7 lib. Same issue:

@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 went back and tried it again - it worked fine. After trying several more times, I experienced the same issue. This was due to the valid JSON data changing to the following:

{"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 lead me to look at the formatting of the data coming from my API (looking at it in Fiddler:

Instead of:

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

it's

JSON
---$id=1
---$values
------{}
---------$id=2
---------CREATEDATETIME...
---------EMAIL=email@email.com
---------GROUPS
------------$id=...
------------$id=...
---------USERNAME=someusername
------{}
---------$id=4
.
.
.

So the error is caused by the array not being accessible where the it's expected - instead of the root, it's one level deep.

How do I get data binding to the one-level-deep rather than the root of the JSON object?

Thanks.

score 28 · Accepted Answer

我在用作自动完成的 ComboBox 时遇到了同样的错误。在我的控制器中，return 语句是

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

我改成

return Json(model, JsonRequestBehavior.AllowGet)

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

score 5 · Accepted Answer

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

由于数组包含在 $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

            }
        )
)

score 2 · Accepted Answer

这对我有用：

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

我的响应不是一个数组，我从服务器返回一个响应对象，如下所示：

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

score 0 · Accepted Answer

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

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

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

score 0 · Accepted Answer

我为此改变，这对我有用：

@(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 - 使用 Javascript/KendoUI 自动完成渲染数据时出错 - 对象 #

Count rows which do not contain some string-Pandas DataFrames

5 回答 5

Count rows which do not contain some string-Pandas DataFrames

5 回答 5

Related

Reference