title: Binding values to HTML dropdownlist using JQuery with ASP.NET MVC WebAPI - Cannot read property '0' of undefined
body: <p>I am trying to populate values for html drowpdown using JQuery from webapi url. JSON returns value and I've verified it using alert function. But, when I bind those into dropdown it is not populating the values. </p>
  
  <p>Chrome developer tool console shows err: </p>
  
  <h2>"Cannot read property '0' of undefined ".</h2>
  
  <pre><code>@section scripts {
  
  &lt;script src="~/Scripts/jquery-1.8.2.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="~/Scripts/jquery-ui-1.8.24.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  
      $(document).ready(function() {
          var testDdl = $('#test');
          $.ajax({
              url: "/api/Values",
              type: "Get",
              success: function(data) {
                  for (var i = 0; i &lt; data.length; i++) {
                      testDdl.append($("&lt;option/&gt;"), {
                          value: this.data[i],
                          html: this.data[i]
                      });
                  }
              },
              error: function(msg) { alert(msg); }
          });
      });
  &lt;/script&gt; }
  
  &lt;body&gt;
  
  &lt;form&gt;
      &lt;select id="test"&gt;&lt;/select&gt;
  &lt;/form&gt; &lt;/body&gt;
  </code></pre>
  
  <p>Please help me to resolve this.</p>