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 < r.d.length; i++) {
                depositRadioList.append('<option>' + r.d[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.

r.d[i] is an object with one property and you want the value of that property. It's not like you haven't done something similar in your script already... (and no, this is not a JSON problem. r is already parsed and therefor an object) — Andreas
– Andreas, Commented Feb 7, 2018 at 18:02
r.d[i].AccountNumber You might want to throw a debugger in the start of your OnSuccess() so you can step through and see what's going on. — Mark Cooper
– Mark Cooper, Commented Feb 7, 2018 at 18:14
@OLDMONK throw a line with debugger; on it in the beginning of your OnSuccess function. This will allow you to see and manipulate your state in real time. In your browser's console you can explore what things actually are. — Mark Cooper
– Mark Cooper, Commented Feb 7, 2018 at 18:20

Balah · Accepted Answer · 2018-02-08 12:38:03Z

1

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

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

answered Feb 8, 2018 at 12:38

Balah

2,5402 gold badges19 silver badges25 bronze badges

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

1 Comment

OLDMONK Over a year ago

Thanks a lot sir..both of them worked.1- Changed my method and signature and returning xml worked.and 2- OnSuccess function like you said,that worked too..Thank you once again.

Tcraw · Accepted Answer · 2018-02-07 19:22:53Z

0

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 (e.g. r.d[i].AccountNumber or r.d[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.

edited Feb 7, 2018 at 19:22

answered Feb 7, 2018 at 18:18

Tcraw

2741 silver badge11 bronze badges

11 Comments

OLDMONK Over a year ago

By whole i mean this [{"AccountNumber":"NS-0000092"},{"AccountNumber":"6MR-0000002"},{"AccountNumber":"1YFD-0000007"}]

Tcraw Over a year ago

Hmmm. Can you provide the output of a single option value? As in, does it look like: {"AccountNumber":"6MR-0000002"}?

Tcraw Over a year ago

Oh -- that means r.d is a parent/containing object and you have to dig down one more level. Add a for or $.each() loop to iterate through r.d. Will update my answer to show example.

OLDMONK Over a year ago

Any example sir?

Tcraw Over a year ago

Was making an example snippet -- just added the JS for now.

|

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Single Object Returned

Modified Function

Array of Objects Returned

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Single Object Returned

Modified Function

Array of Objects Returned

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related