Looping through JSON array results and append a drop down list

Question

I have an ASMX web service that is successfully responding with the following JSON:

[{
    "Id": 49,
    "SupplierName": "Supplier 1"
}, {
    "Id": 50,
    "SupplierName": "Supplier 2"
}, {
    "Id": 51,
    "SupplierName": "Supplier 3"
}, {
    "Id": 52,
    "SupplierName": "Supplier 4"
}]

I am trying to get my ajax call to loop through this array and append the results to a select control in my form. Unfortunately, I am fairly new to using ajax and have not been able to accomplish this yet. Any guidance would be helpful.

$.ajax({
            type: "POST",
            url: "/StockPileDelivery.asmx/PopulateSupplierDdl",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                var data = $.parseJSON(msg.d);
                $.each(data, function (i, item) {
                    alert(i);
                    // $("#dropDownCars").append("<option>" + value.carsName + "</option>");
                });
            },
            error: function (xhr, status, error) {
                var err = eval("(" + xhr.responseText + ")");
                alert(err.Message);
            },
        });

UPDATE Below is my revised AJAX which is returning an error stating "Cannot use 'in' operator to search for '158' in

        $.ajax({
            type: "POST",
            url: "/StockPileDelivery.asmx/PopulateSupplierDdl",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                var data = msg.d;
                $.each(data, function (i, item) {
                    alert(item.Id);
                    //$("#Suppliers").append("<option value='" + item.Id + "'>" + item.SupplierName + "</option>");
                });

            },
            error: function (xhr, status, error) {
                var err = eval("(" + xhr.responseText + ")");
                alert(err.Message);
            },
        });

no need to use $.parseJSON() when dataType:'json' is set. The data passed to success will already be a javascript object or array — charlietfl
– charlietfl, Commented Jul 13, 2017 at 14:32

hallleron · Accepted Answer · 2017-07-13 14:39:49Z

2

The data already is an object here, that's why I didn't do the parseJSON method. Here is a working fiddle:

var msg = [{
    "Id": 49,
    "SupplierName": "Supplier 1"
}, {
    "Id": 50,
    "SupplierName": "Supplier 2"
}, {
    "Id": 51,
    "SupplierName": "Supplier 3"
}, {
    "Id": 52,
    "SupplierName": "Supplier 4"
}];

$(function(){
	$.each(msg, function (i, item) {
    	$("#dropDownCars").append("<option value='"+item.Id+"'>" + item.SupplierName + "</option>");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropDownCars">
</select>

answered Jul 13, 2017 at 14:39

hallleron

1,9823 gold badges15 silver badges21 bronze badges

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

6 Comments

Chris Lombardi Over a year ago

I see your code works, but for some reason it is not working in my ajax success call. See updated code above.

hallleron Over a year ago

Can you please add a "console.log(data);" after "var data = msg.d;" and tell me the output?

Chris Lombardi Over a year ago

[{"Id":49,"SupplierName":"Supplier 1"},{"Id":50,"SupplierName":"Supplier 2"},{"Id":51,"SupplierName":"Supplier 3"},{"Id":52,"SupplierName":"Supplier 4"}]

Chris Lombardi Over a year ago

Parsing seems to fix the issue. I wonder if this is because I am calling an ASMX web service. I have it responding with JSON, but that is the only difference between your code and mine.

Chris Lombardi Over a year ago

That is what I thought too. Now my OCD is kicking in and I have to spend time to see why it doesn't work without parsing. Thank you for your help.

|

cosmorogers · Accepted Answer · 2017-07-13 14:30:43Z

0

On the face of it your ajax looks ok

Have a look at the $.each documentation - http://api.jquery.com/jquery.each/

i in your function is the index, item is the actual value. alert(item) (or better yet console.log(item)) would confirm this.

You probably then want something like

$("#dropDownCars").append("<option>" + item.SupplierName+ "</option>");

answered Jul 13, 2017 at 14:30

cosmorogers

4532 silver badges14 bronze badges

Collectives™ on Stack Overflow

Looping through JSON array results and append a drop down list

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related