How to parse an array from a JSON string?

Question

I have the following C# method:

[HttpPost]
public JsonResult GetDateBasedRegex(string date)
{
    string[] arr = CommonMethods.GetDateBasedRegex(date);

    JsonResult retVal = Json(JsonConvert.SerializeObject(retVal));

    return retVal;
}

arr contains the following:

And retVal.Data contains this value:

That C# method is invoked by this JS:

var date = $('#myDateField').val();

AjaxRequest(date, 'html', 'post', '/Common/GetDateBasedRegex', 'application/json;', function (response)
{
    var result = JSON.parse(response);
} 
);

I've set a breakpoint and added a watch for both response and result:

response is slightly longer because it escapes the quotes but otherwise they're the same value.

Both variables are a single string. How can I parse this value into an array? I looked at a variety of "suggested questions" by SO when typing this question, the most relevant one seems to be this: Javascript how to parse JSON array but I'm already doing what the selected answer suggests.

I tried making a JS fiddle: http://jsfiddle.net/zc2o6v52/ but due to the quotes added by the debugger I had to tweak the values slightly in order to get it to work. If I use the variable csharpJsonSerializedString or result the loop works but when I use response I get an "Uncaught SyntaxError: Unexpected string" error in my console.

What am I doing wrong? How do you parse an array from a JSON string?

EDIT

C# retval's value:

"[\"^[0-9]{9}[A-Z0-9]{0,3}$\",\"^[A-Z]{1,3}([0-9]{6}|[0-9]{9})$\"]"

JS response's value:

""[\"^[0-9]{9}[A-Z0-9]{0,3}$\",\"^[A-Z]{1,3}([0-9]{6}|[0-9]{9})$\"]""

JS result's value:

"["^[0-9]{9}[A-Z0-9]{0,3}$","^[A-Z]{1,3}([0-9]{6}|[0-9]{9})$"]"

Grabbed all of these by right click -> Copy value, so they include the 'wrapping' set of quotes to make it a string.

The C# looks like it's formed right for how one would define a JS array. It seems like response is wrapped with an extra set of quotes though?

I also tried changing my JS to define var result = ['','']; outside of the ajax call, then to update its value with JSON.parse() but it still remains a single string afterwards.

Could you post the exact json you are sending as text and not as an image? In your jsfiddle result is two string seperated by comma, and you try to assign it to a string variable — peterulb, Jun 15 '17 at 19:49
Could you use e.g. postman and hit your api endpoint and copy the body-> raw value? Or in the chrome network tab the raw response body? So far it doesn't seem to be valid RFC 4627 JSON — peterulb, Jun 15 '17 at 20:06
@petul I don't know what you mean with your first question, but if I go to the `network` tab and click on the node for `GetDateBasedRegex` and click on the `Reponse` tab, the value displayed there is `"[\"^[0-9]{9}[A-Z0-9]{0,3}$\",\"^[A-Z]{1,3}([0-9]{6}|[0-9]{9})$\"]"` — sab669, Jun 15 '17 at 20:11
@petul I just copy-pasted that string in my most recent comment into JS fiddle and two weird red symbols appear in the `{9}` quantifier in my regex: http://jsfiddle.net/qhjf4btr/ what the hell is that...? — sab669, Jun 15 '17 at 20:18
What your server returns isn't json. Valid json would be [ "^[0-9]{9}[A-Z0-9]{0,3}$", "^[A-Z]{1,3}([0-9]{6}|[0-9]{9‌})$" ] — peterulb, Jun 15 '17 at 20:28

peterulb · Answer 1 · 2017-06-15T21:03:30.310

Assuming this is the exact value your API returns on the POST request

"[\"^[0-9]{9}[A-Z0-9]{0,3}$\",\"^[A-Z]{1,3}([0-9]{6}|[0-9]{9‌})$\"]"

This is no json, so JSON.parse can't work. Your JSON should look like this:

[
"^[0-9]{9}[A-Z0-9]{0,3}$",
"^[A-Z]{1,3}([0-9]{6}|[0-9]{9‌})$"
]

The best way would be to fix the backend to return the right value (this might point you in the right direction). Otherwise, you need to get rid of the quotation marks at the beginning and end which are added to your result variable:

var result = "\"[\"^[0-9]{9}[A-Z0-9]{0,3}$\",\"^[A-Z]{1,3}([0-9]{6}|[0-9]{9‌})$\"]\"";
result = result.substring(1, result.length-1);
var jsonData = JSON.parse(result);
for (var i = 0; i < jsonData.length; i++) {
    console.log(jsonData[i]);
}

If that doesn't work, check how your response data in the ajax function differs from the valid json mentioned above.

How to parse an array from a JSON string?

1 Answers1