how to bind the JSON data into dropdown list using Jquery?

Question

I am getting this result as JSON output. How do I bind this output in my dropdown using jquery ?

This is jquery code:

function OnSuccess(response) {  

     var ddlCity = $("[id*=SiteMaster_ddlCity]");
     var ddlState = $("[id*=SiteMaster_ddlState]");
     ddlCity.empty().append('<option selected="selected" value="0">Please select</option>');
     ddlState.empty().append('<option selected="selected" value="0">Please select</option>');                            
     $.each(response.d, function () {
           ddlCity.append($("<option></option>").val(this['CITY']).html(this['CITY']));
                ddlState.append($("<option></option>").val(this['STATE']).html(this['STATE']));
            });

     //  alert(response.d);
}

This is the code returning the JSON output

return JsonConvert.SerializeObject(dsCityStatebyZipCode, Formatting.Indented);

u could use the response value, $.each function pass the value and index of the enumerated variable; in short u should fill in the params at $.each function () <- in between this parenthesises — johnjerrico
– johnjerrico, Commented Sep 4, 2017 at 6:44

sainanky · Accepted Answer · 2017-09-04 06:43:08Z

3

you need to apply the index and value in each loop to get the proper value here is the correct syntax to use it

$('.dropdown-content').html('');  //html element where you need to bind the data
    var parseData = jQuery.parseJSON(result.d); // parse the data
    var html = '';            
    $.each(parseData, function (i, v) {   // get data using each loop
        html += "<option>" + v.name+ "</option>";
    });

    $('.dropdown-content').html(html);  // bind the html to targeted element

answered Sep 4, 2017 at 6:43

sainanky

5074 silver badges13 bronze badges

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

8 Comments

rajesh kumar Over a year ago

It is binding as undefined in Dropdownlist :(

sainanky Over a year ago

use the debugger and see what is your response

rajesh kumar Over a year ago

var parseData = jQuery.parseJSON(response.d); // parse the data+ var html = ''; $.each(parseData, function (i, v) { html += "<option>" + v.CITY+ "</option>"; });

sainanky Over a year ago

show me your data format in parseData if there is city in data then they definitely bind the city debug it and show me your data format under parseData variable

rajesh kumar Over a year ago

parseData = {Table: Array(1)}, response = {d: "{ ↵ "Table": [ ↵ { ↵ "CITY": "DPO", ↵ "STATE": "Armed Forces America" ↵ } ↵ ] ↵}"} I am getting parsedata like this in Debugger

|

Collectives™ on Stack Overflow

how to bind the JSON data into dropdown list using Jquery?

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related