jquery + ajax + json + fill dropdown list not working

Question

I'm pretty sure i'am almost there....but i cannot figure out how to iterate through json objects and fill a dropdown list. Here is the js code:

My JSON data returned:

{"name":"County1","name":"County1","name":"County1"}

            $(document).ready(function() {
                $("#ddlCountries").change(function() {
                    $("#ddl2").html("");
                    $.ajax({
                        type: "GET",
                        url: "Handler.ashx?",
                        data: "county=" + $("#ddlCountries option:selected").text(),
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function(countyList) {
                            $.each(countyList, function() {
                                    $("#ddl2").append(' + this['name'] + '');
                                });
                        },
                        error: function(XMLHttpRequest, textStatus) {
                            alert(textStatus);
                        }
                    });
                });
            });

        

 

i'm sure is something simple but as i am a newbie on this i'm not beeing able to get it work.

Appreciate your help guys!

Br, Teixeira

Answer 1

Your JSON data is invalid. You can't have multiple instances of the same property in an object.

You probably want:

[ 
    {
        "name": "Country1"
    },
    {
        "name": "Country1"
    },
    {
        "name": "Country1"
    }
]

Or even:

[ "Country1", "Country1", "Country1" ]

You can loop over it as per the example for for in the spec .