title: Error rendering data with Javascript / KendoUI autocomplete - Object #<Object> has no method 'slice' - how to resolve?
body: <p>I am following the <a href="http://www.kendoui.com/blogs/teamblog/posts/12-10-25/using_kendo_ui_with_mvc4_webapi_odata_and_ef.aspx" rel="noreferrer">Using Kendo UI with MVC4 WebAPI OData and EF</a> article.  After installing KendoUI and making sure all references are set, I type in three characters, and get the following error:</p>
  
  <blockquote>
    <p>Uncaught TypeError: Object # has no method 'slice'</p>
  </blockquote>
  
  <p><strong>Root of the Problem</strong></p>
  
  <p>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.  </p>
  
  <p><strong>Original Problem</strong></p>
  
  <p>I cleaned up kendo.web.min.js and the error is occuring around line 3498:</p>
  
  <pre><code>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 &amp;&amp; r.serverAggregates &amp;&amp; (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)
  </code></pre>
  
  <p>The Kendo UI widgets are loading just fine as well as the css:</p>
  
  <pre><code>&lt;link href="~/Content/kendo/kendo.common.min.css" rel="stylesheet" /&gt;
  &lt;link href="~/Content/kendo/kendo.default.min.css" rel="stylesheet" /&gt;
  &lt;script src="~/Scripts/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="~/Scripts/kendo/kendo.web.min.js"&gt;&lt;/script&gt;
  &lt;script src="~/Scripts/kendo/kendo.aspnetmvc.min.js"&gt;&lt;/script&gt;
  &lt;script src="~/Scripts/appScripts.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>And I am seeing the same error both with using the Razor MVC helper/extension:</p>
  
  <pre><code>@(Html.Kendo().AutoComplete()
      .Name("userAutoComplete")                   // specifies the "id" attribute of the widget
      .DataTextField("USERNAME")
      .DataSource(source =&gt;
          {
              source.Read(read =&gt;
                  {
                      read.Url("/api/user");
                  })
                    .ServerFiltering(true);       // if true, the DataSource will not filter the data on the client
          }
      )
  )
  </code></pre>
  
  <p>and through directly through JS:</p>
  
  <pre><code>/// &lt;reference path="kendo/kendo.aspnetmvc.min.js" /&gt;
  /// &lt;reference path="kendo/kendo.core.min.js" /&gt;
  /// &lt;reference path="kendo/kendo.autocomplete.min.js" /&gt;
  /// &lt;reference path="kendo/kendo.web.min.js" /&gt;
  
  $(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()
  </code></pre>
  
  <p>I'm sure this is something simple that I may be missing.  I have tried both with the web and all js files.</p>
  
  <p>Any assistance would be appreciated.</p>
  
  <p><strong>-- UPDATE --</strong></p>
  
  <p>The only real html missing from that content is the <code>&lt;input id="userAutoComplete" /&gt;</code></p>
  
  <p>I created a brand new solution and a very simple view, based on one of the Kendo UI examples that gets JSON data from <a href="http://api.geonames.org" rel="noreferrer">http://api.geonames.org</a>, and getting the same error.</p>
  
  <p>I thought that using the newest JS library (<code>//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js</code> may have been causing a problem so I tried the 1.7 lib.  Same issue:</p>
  
  <pre><code>@using Kendo.Mvc.UI
  
  @{
      Layout = null;
  }
  
  &lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta name="viewport" content="width=device-width" /&gt;
      &lt;title&gt;Index&lt;/title&gt;
  
      &lt;link rel="stylesheet" href="@Url.Content("~/Content/kendo.common.min.css")"&gt;
      &lt;link rel="stylesheet" href="@Url.Content("~/Content/kendo.default.min.css")"&gt;
      &lt;link rel="stylesheet" href="@Url.Content("~/Content/kendo.dataviz.min.css")"&gt;
  
      &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"&gt;&lt;/script&gt; 
  
      &lt;script src="@Url.Content("~/Scripts/kendo.web.min.js")"&gt;&lt;/script&gt;
      &lt;script src="@Url.Content("~/Scripts/kendo.aspnetmvc.min.js")"&gt;&lt;/script&gt;
      &lt;script src="@Url.Content("~/Scripts/kendo.dataviz.min.js")"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
  
          $(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();
                  }
              })
          });
  
      &lt;/script&gt;    
  
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div&gt;
  
          &lt;input id="autoComplete"/&gt;
  
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>-- UPDATE --</strong></p>
  
  <p>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:</p>
  
  <pre><code>{"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}}
  </code></pre>
  
  <p>... which lead me to look at the formatting of the data coming from my API (looking at it in Fiddler:</p>
  
  <p>Instead of:</p>
  
  <p>JSON
  ---{... data...</p>
  
  <p>it's </p>
  
  <pre><code>JSON
  ---$id=1
  ---$values
  ------{}
  ---------$id=2
  ---------CREATEDATETIME...
  ---------EMAIL=email@email.com
  ---------GROUPS
  ------------$id=...
  ------------$id=...
  ---------USERNAME=someusername
  ------{}
  ---------$id=4
  .
  .
  .
  </code></pre>
  
  <p>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.</p>
  
  <p>How do I get data binding to the one-level-deep rather than the root of the JSON object?</p>
  
  <p>Thanks.</p>