How to parse JSON list of string on ajax return?

Question

I have a simple ajax call which returns a serialised list of strings. This is great and I can get the data back. However I'm simply trying to perform an alert on each item in the list. However, I just keep getting back single characters from the list instead. For example if it returned a list with one item in it called "Hello". It would alert "H", "E", "L" etc. Can someone help me change this so it alerts the full string?

The response received back is very similar to the text above. If the c# variable userList returns a list of strings with just "Andrew" in it. The JQuery will alert "A", "N", "D" etc. If that isn't clear, just let me know.

Thanks

C#

[HttpPost]
        public string GetUserList(string Role) {
            List<string> UserList = new List<string>();
            UserList = Roles.GetUsersInRole(Role).ToList();
            return JsonConvert.SerializeObject(UserList);
        }

JQuery

   $('#allRolesDD').change(function () {
        $.ajax({
            method: "POST",
            url: "./GetUserList",
            data: { Role: $(this).val() }
        })
        .done(function (data) {
            $('.roleDD').empty();
            for (i = 0; i < data.length; i++) {
                alert(data[i]);
            }
            console.log("Passed 4");
        })
        .fail(function () {
            console.log("Failed 4");
        })
    });

`dataType:'json'` add this in the ajax. it could be better if you could post the response too in the question. — Jai, Dec 14 '15 at 12:22
@Jai Did this and it didn't change anything. Okay, ill post the response — Andrew Kilburn, Dec 14 '15 at 12:23

score 5 · Accepted Answer · answered Dec 14 '15 at 12:51

you can change c# code and jquery like below:

C#

[HttpPost]
    public JsonResult GetUserList(string Role) {
        List<string> UserList = new List<string>();
        UserList = Roles.GetUsersInRole(Role).ToList();
        return Json(UserList, JsonRequestBehavior.AllowGet);
    }

JQuery

  $('#allRolesDD').change(function () {
$.ajax({
    method: "POST",
    url: "./GetUserList",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    data: { Role: $(this).val() }
})
.done(function (data) {
    $('.roleDD').empty();
    for (i = 0; i < data.length; i++) {
        alert(data[i]);
    }
    console.log("Passed 4");
})
.fail(function () {
    console.log("Failed 4");
})
});

Thank for the persistence. You've helped a lot here. Can I ask what the different is from returning a Json serialised string compared to a JsonResult? — Andrew Kilburn, Dec 14 '15 at 12:59
Your return type was string. so Json serialised return will converted to string and get back to you. so you got just a string not the list. — Atikur Rahman, Dec 14 '15 at 13:02

AntiHeadshot · Answer 2 · 2015-12-14T12:41:10.087

0

Why don't you return the list as it is instead of a string, the web API will automaticly convert it to json and you can read it as an array in your request?
You just have to add

$('#allRolesDD').change(function () {
    $.ajax({
        method: "POST",
        url: "./GetUserList",
        data: { Role: $(this).val() },
        headers: {
            'Content-Type': 'application/json'
        }
    })
    .done(function (data) {
        $('.roleDD').empty();
        for (i = 0; i < data.length; i++) {
            alert(data[i]);
        }
        console.log("Passed 4");
    })
    .fail(function () {
        console.log("Failed 4");
    })
});

edited Dec 14 '15 at 12:41

answered Dec 14 '15 at 12:29

AntiHeadshot

1,130
9
24

Do you have any links which you could show me on how to implement this? – Andrew Kilburn Dec 14 '15 at 12:38
@AndrewKilburn I updatd the answer, I think this should do the job. – AntiHeadshot Dec 14 '15 at 12:41
I then get an internal server error stating that it cannot find the GetUserList method. Pretty strange as it could before. Does that mean that I have to change my return type to json instead of a string? – Andrew Kilburn Dec 14 '15 at 12:43
@AndrewKilburn No, you have to change your return type to `List` – AntiHeadshot Dec 14 '15 at 12:44

score 0 · Answer 3 · answered Dec 14 '15 at 12:36

0

Try jquery each:

 $.ajax({
            method: "POST",
            url: "./GetUserList",
            data: { Role: $(this).val() },
            success:function (data) {
               $.each(data,function(i,v){
                       console.log(v);
               });
            }
        });

answered Dec 14 '15 at 12:36

madalinivascu

32,064
4
39
55

I receive the error: Cannot use 'in' operator to search for 'length' in ["ANDREW"]. I tried this before but to no avail :( – Andrew Kilburn Dec 14 '15 at 12:37
But how? I'm serialising the data correctly. Not sure why that is happening – Andrew Kilburn Dec 14 '15 at 12:39

score 0 · Answer 4 · answered Dec 14 '15 at 12:57

You need to add dataType: "json" into the ajax call because it doesn't know that your response is a json. It assumes that it is a string.

$("#allRolesDD").change(function () {
    $.ajax({
        method: "POST",
        url: "./GetUserList",
        data: { Role: $(this).val() },
        dataType: "json"                   
    })
    .done(function (data) {
        $('.roleDD').empty();

        $.each(data, function (i, v) {
            alert(v);
        });

        // or you could also iterate using for 
        //for (i = 0; i < data.length; i++) {
        //    alert(data[i]);
        //}

        console.log("Passed");
    })
    .fail(function () {
        console.log("Failed");
    })
});

How to parse JSON list of string on ajax return?

4 Answers4

Linked