Passing PHP JSON to Javascript: echo json_encode vs echo json declaration

Passing PHP JSON to Javascript and reading

var data = <?php echo json_encode($json); ?>;
var arr = new Array();
arr = JSON.parse(data);
document.write( arr[0].something );

It all depends on what you want to send from server to the client - be it a data (JSON) or some code.

Two approaches:

1. Echo a JSON file on a server - then you print your JSON document and set response Content-Type to application/json. This way you can use any AJAX library you wish, like $.get or raw XMLHttpRequest etc. It is a way of passing data.

2. Echo a Javascript code on a server and then use $.getScript to load it. It's a way of passing code. This is potentially less secure, because your code can contain not only JSON, but also any arbitary code. So if attacker can compromise your server, he could be able to push code to any client for a remote execution.

If you want to pass data only, go with first approach. It's cleaner and more safe.

Additionally, if you ever end up writing frontend in different environment, say different programming language, you'll be able to resuse the same JSON-returning endpoint. It'll be harder if you return Javascript code.

Even though it may seem like overkill for your particular problem, I would go for the json_encode/parse option still. Why? you ask. Well, think of it as avoiding duplication. If you encode/parse you can keep the constants in an object easily readable by you PHP-code. And the same for your JS code.

It simply eliminates the need to fiddle with it.

constant.php

<?php
$array = array("const1" => "val", "const2" => "val2");
?>
<script>
var contants = <?php echo json_encode($array); ?>
</script>

======================END OF FILE constant.php=======

In php you can access using

$array["<key>"]

In javascript, you can access using

contants.const1, ....

Usually this is what I do, the safest way I've found:

// holds variables from PHP
var stuff = {};
try {
    // stuff will always be an object
    stuff = JSON.parse('<?php echo empty($stuff) ? '{}' : json_encode($stuff) ?>');
} catch (e) {
    if (e instanceof SyntaxError)
    {
        // report syntax error
        console.error("Cannot parse JSON", e);
    }
}
// show resulting object in console
console.log("stuff:", stuff);

You use json_encode if you use php array not a string:

$array = array("const1" => "val", "const2" => "val2");

echo json_encode($array);

if you call json_encode on a string you will get:

"{\"const1\": \"val\", \"const2\": \"val2\"}"

The argument to json_encode() should be a PHP data structure, not a string that's already in JSON format. You use this when you want to pass a PHP object to Javascript.

json_encode is a function that converts a PHP array into a JSON string, and nothing more. Since your $json_obj variable is already a JSON string, no further conversion is needed and you can simply echo it out.

To get to your $json_obj string from an array your code would have looked like this

$json_array = array(
    "const1" => "val",
    "const2" => "val2"
);

$json_obj = json_encode($json_array);

PHP To JSON

var locations = <?php echo json_encode($sample_location_master); ?>;