Converting array got through Ajax (and Web Service method) into javascript array

Question

I've been dabbling in PageMethods (in Webfroms) for a Web App I'm developing. I hit a wall when it came to master pages (ie. PageMethods coming back 'undefined'). So, I've changed my approach and am looking at calling a method inside a Web Service instead. (There seems to be a few advantages over PageMethods as well.)

I'm having a bit of difficulty when it comes to getting array information back from the C# code inside the Web Service into Javascript (so it can be used on the client side). The code in the web service (for concept testing) is:

[WebMethod]
    public int[] HelloWorld()
    {
        return new int[] { 1, 2, 3};
    }

The Javascript calling the C# method inside the Web Service is:

 function processSourceInputButtonClicked() {
                            $.ajax({
                                type: "POST",
                                url: "Webservice.asmx/HelloWorld",
                                data: "{}",
                                dataType: "text",
                                success: function (data) {
                                   alert("Ok:" + data);
                                },
                                error: function (XMLHttpRequest, textStatus, errorThrown) {
                                    alert("Err:" + textStatus + "," + errorThrown.toString());
                                }
                            });
                        };

If I look at 'data', the array comes back as a bunch of XML:

<?xml version="1.0" encoding="utf-8"?>
<ArrayOfInt xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://tempuri.org/">
  <int>1</int>
  <int>2</int>
  <int>3</int>
</ArrayOfInt>

Is there a way of converting this HTML into a Javascript array of integers?

you need to parse xml into json Object for getting data as js array — yash
– yash, Commented Feb 25, 2015 at 6:21
Change the dataType to JSON in your AJAX call, and you can use the JavaScriptSerializer class in C# to convert the array to JSON. — Darren
– Darren, Commented Feb 25, 2015 at 6:22
I've changed the datatype to "json" and modified the C# code to reflect your suggestion with the JavaScriptSerializer: — Alex M
– Alex M, Commented Feb 25, 2015 at 6:39
I've changed the datatype to "json" and modified the C# code to reflect your suggestion with the JavaScriptSerializer so that HelloWorld returns a string (by "return jss.Serialize(new int {1, 2, 3});). Now I get a parsererror, SyntaxError: Invalid character. Have I applied your suggestions correctly? — Alex M
– Alex M, Commented Feb 25, 2015 at 6:45

ronen · Accepted Answer · 2015-02-25 06:31:52Z

1

You should change the "dataType" to "json" like this:

$.ajax({
                                type: "POST",
                                url: "Webservice.asmx/HelloWorld",
                                data: "{}",
                                dataType: "json", // change "text" to "json"
                                success: function (data) {
                                   alert("Ok:" + data);
                                },
                                error: function (XMLHttpRequest, textStatus, errorThrown) {
                                    alert("Err:" + textStatus + "," + errorThrown.toString());
                                }
                            });

answered Feb 25, 2015 at 6:31

ronen

1,4803 gold badges17 silver badges35 bronze badges

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

4 Comments

Alex M Over a year ago

Thank you for your suggestion. If I just change the datatype to "json" (and do no other changes), I get a parseerror, SyntaxError: Invalid character. Is there something in the C# code that needs to be modified? Does returning a set of integers (as opposed to a string) cause problems when using Ajax?

ronen Over a year ago

try to add this attribute to your WebMethod:[ScriptMethod(ResponseFormat = ResponseFormat.Json)]

Alex M Over a year ago

I've given that a try - added the decoration you suggested. I still get the same error. Maybe the Ajax call is looking for more?

Alex M Over a year ago

Got it! @ronen's suggestion works provided you have contentType: "application/json; charset=utf-8" inside the Ajax call. (To get the actual integer array in Javascript you want to look in the '.d' property of data.)

hutchonoid · Accepted Answer · 2015-02-25 12:17:33Z

1

First you need to parse the xml and find the int nodes.

Then you can iterate over the collection and do as you wish.

Here is a simple example that adds the values to an unordered list:

var xml = '<?xml version="1.0" encoding="utf-8"?><ArrayOfInt xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://tempuri.org/"><int>1</int><int>2</int>  <int>3</int></ArrayOfInt>';
  xmlDoc = $.parseXML( xml ),
  $xml = $( xmlDoc ),
  $ints = $xml.find( "int" );

$.each($ints, function( index, value ) {
  $( "ul" ).append('<li>' + $(value).text()  + '</li>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul></ul>

answered Feb 25, 2015 at 12:17

hutchonoid

33.4k15 gold badges102 silver badges106 bronze badges

1 Comment

Alex M Over a year ago

Outstanding ... that'll work. For other who come across this, to get the actual number value out of 'value' over the iteration I used 'value.textContent' and then 'pushed' that onto a Javascript array.

Collectives™ on Stack Overflow

Converting array got through Ajax (and Web Service method) into javascript array

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related