returning List<string> from JSON call in Jquery has undefined length

Question

I am making a call to a webservice from jquery and trying to return an List (I have also tried a string[]). When I get the results back I can see it holds an array with the values I need, but I can not iterate through them in Javascript because there is no length value.

my C# Webservice is as follows:

    [WebMethod]
    public string[] GetMultiChoiceOptions(int keyId)
    {
        string connectionString = System.Web.Configuration.WebConfigurationManager.ConnectionStrings["OBConnectionString"].ConnectionString;
        SitesUtil db = new SitesUtil(connectionString);
        List<MultiChoiceOption> keys = db.GetMultiChoiceOptions(keyId, 1); //TO DO CHANGE THIS TO REAL USERID

        return keys.Select(a => a.OptionValue).ToArray();
    }

and My Jquery/javscript call is as follows:

function GetKeys(keyid) {

    var pageUrl = '<%=ResolveUrl("~/WebService/UpdateDatabase.asmx")%>'
    $.ajax({
        type: "POST",
        url: pageUrl + "/GetMultiChoiceOptions",
        data: '{keyId:' + keyid + '}',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: GetKeysSuccessCall,
        error: OnErrorCall
    });
}

function GetKeysSuccessCall(response) {
    /* TO DO */
    var i = 0;
    for (i =0; i < response.length; i++) {
        $("#popupList").append('<li>' + response[i] + '</li>');                
        }       
}

I'm not sure how I deal with an array without a length in javascript?

Answer 1

I think you should use first of all the JSONSerializer to send the rigth json structure to the client.

You should return only a string, which has the JSON format, and then it will work!

Answer 2

First, use Google Console. Best and helpful.

To see what you receive, use console.log(response); (instead of alert and do NOT use in IE because it doesn't know console)

try first of all

$.ajax({
        type: "POST",
        url: pageUrl + "/GetMultiChoiceOptions",
        data: '{keyId:' + keyid + '}',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(response){
          GetKeysSuccessCall(response);
        },
        error: function(msg) {
           OnErrorCall(msg);
         }
    });

And one more :

function GetKeysSuccessCall(response) {
    /* TO DO */
    var i = 0;
    for (i =0; i < response.length; i++) {
        $("#popupList").append('<li>' + response[i] + '</li>');                
        }       
}

repsonse must be instead of item

Answer 3

I cant explain why it works, but what I needed to do was get the response.d value....

So this was the solution in the end:

function GetKeysSuccessCall(response) {
    /* TO DO */
    var result = response.d;

    var i;
    for (i = 0; i < result.length; i++)
    {
        $("#popupList").append('<li>' + result[i] + '</li>');         
    }
}

(if someone can explain where the .d comes from?)

Answer 4

You can use the .each function like so

   success: function (response) {
            var options= response.d;
            $.each(options, function (index, option) {
                $("#popupList").append('<li>' + response[option] + '</li>'); 

            });
        },

or

function GetKeysSuccessCall(response) {
    /* TO DO */
    var i = 0;
    for (i =0; i < response.d.length; i++) {
        $("#popupList").append('<li>' + response.d[i] + '</li>');                
        }       
}