Parsing Json data from asp.net webservice and populating it in asp.net dropdownlist

Question

i am trying to populate an asp.net dropdownlist returned as JSON from my webservice.

WebService

 [WebMethod(EnableSession = true)]
    public string GetActiveDepositAccountsForLoanAlert(string customerId)
    {
        var data = BusinessLayer.SMS.SmsSetup.GetActiveDepositAccountsForLoanAlert(customerId.ToLong());
        var json = new JavaScriptSerializer().Serialize(data);
        return json;
    }

The webservice returns

[{"AccountNumber":"NS-0000092"},{"AccountNumber":"6MR-0000002"},{"AccountNumber":"1YFD-0000007"}]

I am calling the data from ajax call and populating it to my dropdownlist.

Ajax call

  function GetActiveDepositAccounts(customerrId) { var customerId = $('#CustomerIdHiddenField').val(); var data = { customerId: $('#CustomerIdHiddenField').val() }; var json_data = JSON.stringify(data); $.ajax({ type: "POST", url: "/WebMethods/Misc.asmx/GetActiveDepositAccountsForLoanAlert", data: json_data, contentType: "application/json; charset=utf-8", dataType: "json", success: OnSuccess, failure: function (response) { alert(response.d); } }); } function OnSuccess(r) { var depositRadioList = $("[id*=DepositAccountDropDownList]"); depositRadioList.empty().append('<option selected="selected" value="0">Please select</option>'); for (var i = 0; i < rdlength; i++) { depositRadioList.append('<option>' + rd[i] + '</option>'); } } 

The data gets populated in json.In my dropdown i only want the accountnumber as NS-0000092.I am getting the whole json in my dropdown.i have searched and seen lots of question with this Json parse thing in here.But couldnt get hold of this.It isnt that i didnt tried,I am newbie,so before marking this as duplicate,please for once have a look at the code.Thank you.

Answer 1

I can't shake the feeling that because your GetActiveDepositAccountsForLoanAlert is returning a string and not an object, rd is being seen as a string. Try one of 2 things. Either:

1. Change your method signature to return data type and don't use the JavaScriptSerializer. or,
2. In your OnSuccess function, add var data = JSON.parse(rd) and use that variable in your for loop.

Answer 2

Single Object Returned

If by " whole json ", you mean you are getting a single {"AccountNumber":"6MR-0000002"} per option -- try outputting the value of the target AccountNumber object (eg rd[i].AccountNumber or rd[i]["AccountNumber"] ).

Modified Function

    var depositRadioList = $("[id*=DepositAccountDropDownList]");
        depositRadioList.empty().append('<option selected="selected" value="0">Please select</option>');
        for (var i = 0; i < r.d.length; i++) {
            depositRadioList.append('<option>' + r.d[i].AccountNumber + '</option>');
        }

Array of Objects Returned

If the result per option is an entire AccountNumber array of objects, you'll need to loop through your r object until you get to the list of Account Number objects.

Take a look at my Example JS Fiddle . There is probably a cleaner way to do this, but to present the principle, I've laid out nested loops to get you into the list of object values that you need for your <select></select> .

I'm using the JQuery $.each() method, but you can use the for loop. I recommend just using one or the other for consistency. If the data set is really large, for loops have better performance.