jquery 1.9.1 fails to parse JSON that contains escaped backslash

Question: how can I use the asp.net JavascriptSerializer on the server to create JSON strings that will always work with the jquery 1.9.1 parseJSON() method in IE 9?

On the server I am calling JavascriptSerializer.Serialize() on an object to convert it to a JSON string. The object has properties which can contain a backslash. So the JavascriptSerializer takes a value like this:

HasBackslash

And escapes it like this:

Has\Backslash

When I run the resulting JSON string through JsonLint it is validated:

{"HasBackslash":"Has\Backslash"}

And when I run this through JsonLint it throws a parse error:

{"HasBackslash":"HasBackslash"}

In IE9/jquery 1.9.1 the exact opposite is acceptable. The bit of Javascript created by JavascriptSerializer on the server fails in the browser with the error “Invalid Character”:

var HasBackslash = $.parseJSON('{"HasBackslash":"Has\Backslash"}');

But this bit of Javascript works just fine:

var HasBackslash = $.parseJSON('{"HasBackslash":"HasBackslash"}');

Here is full example, I’m using jquery 1.9.1 and IE 9.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>The Title</title>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        try {
            var NoBackslash = $.parseJSON('{"NoBackslash":"No Backslash"}');
            $('#NoBackslash').text('NoBackslash parsed successfully');
        }
        catch(err){
            $('#NoBackslash').text('Error parsing NoBackslash: ' + err.message);
        }

        try {
            var HasBackslash = $.parseJSON('{"HasBackslash":"HasBackslash"}');
            $('#HasBackslash').text('HasBackslash parsed successfully');
        }
        catch (err) {
            $('#HasBackslash').text('Error parsing HasBackslash: ' + err.message);
        }


        try {
            var HasEscapedBackslash = $.parseJSON('{"HasEscapedBackslash":"Has\Backslash"}');
            $('#HasEscapedBackslash').text('HasEscapedBackslash parsed successfully');
        }
        catch(err){
            $('#HasEscapedBackslash').text('Error parsing HasEscapedBackslash: ' + err.message);
        }

    });
</script>
</head>
<body>
    <p id='NoBackslash'></p>
    <p id='HasBackslash'></p>
    <p id='HasEscapedBackslash'></p>
</body></html>

Contents hide

Answers:

Method 1

Method 2

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You are drawing the wrong conclusions. You are changing the environment where the data is evaluated and that’s why you get seemingly contradicting results.

Lets start with.

{"HasBackslash":"HasBackslash"}

It’s invalid JSON because B is an invalid escape sequence.

{"HasBackslash":"Has\Backslash"}

is valid because \ is a valid escape sequence. When the JSON is parsed, it will create the character .

Now to:

$.parseJSON('{"HasBackslash":"Has\Backslash"}');

Since you are working with a JavaScript string where is the escape character as well, the are considered to be part of the string literal. Just try

> console.log('{"HasBackslash":"Has\Backslash"}');
{"HasBackslash":"HasBackslash"}

You see, the string value, which is the real value that is passed to $.parseJSON, is the same as first one, which was invalid.

However,

$.parseJSON('{"HasBackslash":"HasBackslash"}');

works, since again, you are working with a JavaScript string, so the value being parsed is

> console.log('{"HasBackslash":"HasBackslash"}');
{"HasBackslash":"HasBackslash"}

which does not contain a backslash.

So, as long as you are not embedding the generated JSON into a JavaScript string, you should be fine.

Method 2

Thank you for your patience @Felix Kling. In sum, here is what I was doing wrong. Server-side I was first creating a JSON string from an object:

string jsonString = new JavaScriptSerializer.Serialize(myObject);

then, from the server, injecting this bit of javascript into the page:

"var o = $.parseJSON('" + jsonString + "');";

The problem is the call to $.parseJSON. This is not needed; I already have a ready-made JSON object. All I need to inject is this:

"var o = " + jsonString + ";";

And, if you are doing this in an MVC cshtml page in a block of Javascript, remember to preface with Html.Raw():

var o = @Html.Raw(jsonStringVariable);

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating