Error rendering data with autocomplete - Object #<Object> has no method 'slice' - how to resolve?

[B]

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 #<Object> has no method 'slice'

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.


Thanks.

[B]

The problem was in the data hierarchy.  The first level did not contain an array, which JS was expecting.  The resulting data was contained in /data/$values.  If the array was contained in /data, I wouldn't have experienced this issue.

To resolve this I specified a schema and returned the value of /data/$values from the function:

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

This completely solved the problem.

One thing to mention however, I couldn't find any support for adding a data schema to the AutoComplete MVC extension, so the following would 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
          }
      )
)