javascript - Cannot read JSON returned by .Net Core controller on client side

Question

In my controller I have a method that gets triggered by an AJAX call. I have a list of strings that I want to return

List<string> Usernames = new List<string>();

Then when data is loaded into Usernames I convert it into JSON

var JsonResults = Json(Usernames);

finally I return that JSON as below

return Json(new { success = true, resultsList =JsonResults });

In JavaScript, How can I loop through that array resultsList? Here is what the JS code looks like -

$.ajax({
    url: "@Url.Action("StartNewChat")",
    data: { SearchedText: searchedText },
    type: "GET",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (result) {
        if (result.success == true) {

            // READ THROUGH result.resultsList                
        }
    }
});

I tried JSON.parse() and result.resultsList[0] and converting result.resultsList into string and back to JSON it didn't work.

Edit:
When I do a console.log(result.resultsList) here is what I get which is pretty strange

{"contentType":null,"serializerSettings":null,"statusCode":null,"value":["a","aa","aaa"]}

the last array is the result from Username array in c#

question from:https://stackoverflow.com/questions/65877760/cannot-read-json-returned-by-net-core-controller-on-client-side

Answer 1

I'm not familiar with the Json method you are using, but from version 3.1 .Net Core has its own json serializer JsonSerializer (in System.Text.Json namespace) and I'm going to use that one in my answer.

As of your issue, you are serializing twice and it might not give you the resultsList in your final result as an array of string which you might be expecting.

Your first conversion will result in an array of strings -

["alice","bob","charlie"]

But your second conversion, depending on the serializer used, might put the entire array above inside a string and give that as the value of resultsList in your final result.

You should serialize once, the final object only -

// you need to import the following
// using System.Text.Json;

List<string> userNames = new List<string>();
names.Add("alice");
names.Add("bob");
names.Add("charlie");

return JsonSerializer.Serialize(new { success = true, resultsList = userNames });

It will give you resultsList as an array of strings -

{"success":true,"resultsList":["alice","bob","charlie"]}

Then you can loop through that array on the client end like -

result.resultsList.forEach(p=> console.log(p))