javascript parse.json error with data from php json_encode

Question

I've a very nasty problem sending data from PHP to Javascript.

Long story short... I get some data from a DB then convert all to json and send all to a javascript function.

One of the column from the DB contain data that look like:

val01\test\val04

I assign these data to an array then using json_encode convert everything to json, like in this example:

$result = 'val01\test\val04'; //these are the data that are get from DB
$example = ['testData' => $result];
json_encode($example);

At the end I've these data:

{"testData":"val01\\test\\val04\\"}

now, when i use these result with parse.json like this:

var json = '{"testData":"val01\\test\\val04\\"}';
obj = JSON.parse(json);

I receive an error:

Error: Unexpected token v in JSON at position 24

seem that the slashes are escaped incorrectly... To be sure that is not my fault with something else.. I test my example also on MDN sample page (https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse) that return same result.

How can I solve this problem?

I won't create my own escape function.. is too dangerous from my point of view.. I never know what kind of data I will can find in this columns so.. there is a clean way to handle this problem?

thank you

Answer 1

You seem to be doing two things:

1. Generate JSON.
2. Insert such JSON inside a JavaScript string literal.

Remember that JSON is not JavaScript. JSON is just a plain text data format while JavaScript is a full-fledged programming language. They're often confused because the former was inspired in the syntax of certain data structures from the latter, but that's where the similarity ends.

Dealing with #1 is easy: PHP has a function specifically designed for it, json_encode(), and in my experience it's rock solid.

Dealing with #2 is not as straightforward, though. PHP has functions (better or worse) to escape literal data in HTML, URLs or SQL, but it's never really had a specific function to do that same job in JavaScript strings.

Shall we write our own function? Luckily not. Here's where the similarity between JSON and JavaScript comes to help us. It happens that we can also use json_encode() to escape raw input in JavaScript strings because JSON syntax is a subset of JavaScript string syntax. But... JSON has to be an object or an array, doesn't it? That's true. Luckily, PHP comes to the rescue because:

PHP implements a superset of JSON as specified in the original RFC 7159.
[...]
Like the reference JSON encoder, json_encode() will generate JSON that is a simple value (that is, neither an object nor an array) if given a string, integer, float or boolean as an input value. While most decoders will accept these values as valid JSON, some may not, as the specification is ambiguous on this point.

Source

In other words, json_encode() also produces JSON fragments. So you can do this:

<?php
$result = 'val01\test\val04'; //these are the data that are get from DB
$example = ['testData' => $result];
$json = json_encode($example);
$javascript = json_encode($json);
?>
<script>
var json = <?php echo $javascript; ?>;
var obj = JSON.parse(json);
</script>

Which renders:

<script>
var json = "{\"testData\":\"val01\\\\test\\\\val04\"}"
var obj = JSON.parse(json);
</script>

And works as expected once in the browser:

var json = "{\"testData\":\"val01\\\\test\\\\val04\"}"
var obj = JSON.parse(json);
console.log(obj.testData);

---

As noted in comments, using JSON as proxy to pass data from PHP to JavaScript is completely redundant. Remember: JSON syntax is a subject of JavaScript syntax. That means that any valid JSON string also happens to be a valid JavaScript object or array literal. In this use case it doesn't make sense to encode twice in PHP and decode afterwards in JavaScript.