Binding values to HTML dropdownlist using JQuery with ASP.NET MVC WebAPI - Cannot read property '0' of undefined

Question

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.

Chrome developer tool console shows err:

"Cannot read property '0' of undefined ".

@section scripts {

<script src="~/Scripts/jquery-1.8.2.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-ui-1.8.24.min.js" type="text/javascript"></script>

<script type="text/javascript">

    $(document).ready(function() {
        var testDdl = $('#test');
        $.ajax({
            url: "/api/Values",
            type: "Get",
            success: function(data) {
                for (var i = 0; i < data.length; i++) {
                    testDdl.append($("<option/>"), {
                        value: this.data[i],
                        html: this.data[i]
                    });
                }
            },
            error: function(msg) { alert(msg); }
        });
    });
</script> }

<body>

<form>
    <select id="test"></select>
</form> </body>

Please help me to resolve this.

What does console.log(data) give you if you place it inside the success callback? — Kristoffer Jälén
– Kristoffer Jälén, Commented Jun 23, 2014 at 19:39
I tried the above link opt.text = data[i]; opt.value = data[i]; testDdl.options.add(opt);. But, I am getting "Cannot read property 'add' of undefined" error. — Uba
– Uba, Commented Jun 23, 2014 at 19:43
I do have 2 values in my json. So, console gives "Value1, value2". — Uba
– Uba, Commented Jun 23, 2014 at 19:47

John · Accepted Answer · 2014-06-23 20:04:55Z

2

If you are certain that the data object is correct (it would have to just be an array of strings) this should work:

success: function(data) {
   for (var i = 0; i < data.length; i++) {
       var option = $("<option/>");
       option.attr("value", data[i]).text(data[i]);
       testDdl.append(option);
    }
 },

Here is a fiddle of it in action: http://jsfiddle.net/aq8X5/5/

answered Jun 23, 2014 at 20:04

John

1661 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kristoffer Jälén · Accepted Answer · 2014-06-23 19:54:22Z

0

Iterate through the result with $.each.

$.each(data, function(key, value) {
    console.log(key);
    console.log(value);
}

What you should pass to testDdl.append depends on what your JSON looks like.

answered Jun 23, 2014 at 19:54

Kristoffer Jälén

4,8664 gold badges35 silver badges60 bronze badges

Collectives™ on Stack Overflow

Binding values to HTML dropdownlist using JQuery with ASP.NET MVC WebAPI - Cannot read property '0' of undefined

"Cannot read property '0' of undefined ".

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

"Cannot read property '0' of undefined ".

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related