Return array of strings from MVC to jQuery ASP.NET

Question

I want to return an array of strings from an MVC function via a jQuery AJAX call.

My client side code is:

function get_categories() {
    var url = "/Profile/GetCharacters";
    $.post(url, function (data) {
    alert(data);
});

But I cannot read array elements. In alert(data) it always says system.array[] and in alert(data[0]) it says s (i.e. first character in system.array[]) and not the array elements.

Here is simplified version of my server side code.. cause original is big way too complicated :)

public Array GetCharacters()
    {

        var ret = new string[10];
        ret[0]="abc";
        ret[1] = "def";
        ret[2] = "ghi";
        return (ret);
    }

but this gives "System.string[]" instead and same problem when accessing individual values

Tabu

Why not return JSON and parse that? – Putdown

Please post your server side code (your action method). I think you're returning a string containing system.array[], rather than a JSON serialized array. – Virtual

im not using json which is my plan B if this doesn't work out – Tabu

Answer 1

You can return JSON.

For instance, you could make an Ajax request to the following controller action:

public JsonResult GetMyData()
{
    SomeClass s = new SomeClass();
    s.Property1 = "value";
    s.Property2 = "another value";

    return Json(s, JsonRequestBehavior.AllowGet); //you will need the AllowGet option to return data to a GET request
}

Then, your javascript could make an Ajax request (using jQuery's Ajax function) to the controller:

var onSuccess = function (data) {
    //data will be your s object, in JSON format
};

$.ajax({
    type: 'GET',
    url: '/ControllerName/GetMyData/',
    success: function (data) { onSuccess(data); }
});

EDIT: When returning an array, or List you will need to add the traditional:true option to the Ajax call, like this:

var onSuccess = function (data) {
    //data will be your s object, in JSON format
};

$.ajax({
    type: 'GET',
    url: '/ControllerName/GetMyData/',
    success: function (data) { onSuccess(data); },
    traditional: true
});

I am not 100% sure why (I Iam sure someone will fill us in), but that has given me fits in the past.

One more EDIT: You may need to parse the JSON, which should create an actual javascript Array object for you:

var onSuccess = function (data) {
    //data will be your s object, in JSON format
    var arr = JSON.parse(data);
};

Pyrophosphate

Answer 2

What are you running on your backend side?

Basically you may want to serialize your array first using json or xml.

If it's PHP, here is an example from jQuery .post API

Example: Posts to the test.php page and gets contents which has been returned in json format.

PHP code

<?php echo json_encode(array("name"=>"John","time"=>"2pm")); ?>

jQuery code

$.post("test.php", { "func": "getNameAndTime" },
 function(data){
   console.log(data.name); // John
   console.log(data.time); //  2pm
 }, "json");

If it's JAVA you can use a library to serialize json objects like Googles' gson

Panic