Best place in html page for php block when passing variables to javascript

Question

I have a simple HTML page and I feel unsure about which is the best place to put a PHP block that loads 2 JSON arrays from files so that they can then be passed on to JavaScript variables.

I have placed it here, but I have no criteria:

<!DOCTYPE html>

//i have placed the block here
<?php
    $twit_collection=file_get_contents('cdtwbot_twit_collection.json');
    $tag_collection=file_get_contents('cdtwbot_tag_collection.json');
?>

<html>
    <head>
        <script type="text/javascript">
            //pass PHP variables declared above to JavaScript variables
            var twit_collection = <?php echo $twit_collection; ?>;
            var tag_collection = <?php echo $tag_collection; ?>;
        </script>
    </head>

    <body>
        //document continues...
    </body>
</html>

Would it be better placed inside the <head> tag? Or somewhere else?

There is a great post about passing variables from PHP to JavaScript here but it doesn't cover this point.

score 2 · Accepted Answer · edited May 23 '17 at 12:22

From a purely technical standpoint, I'd say it doesn't matter. You can put your php code anywhere on the page, so your solution makes as much sense as putting it anywhere else. There are no convention where to put php code, such convention like you should put your JS code in the <head>, but if you want one I'd say insert it next to the JavaScript variables, because it makes the code more understandable.

In this very example, however I wouldn't use separate variables for this case, as it just confuses the matters, and slows down the code. (Unless, of course, you want to use the variables more than once.)

I'd change the code to this:

<script type="text/javascript">
     var twit_collection =
          <?php echo file_get_contents('cdtwbot_twit_collection.json'); ?>;
     var tag_collection =
          <?php echo file_get_contents('cdtwbot_tag_collection.json'); ?>;
</script>

Also, I'd add that this is needless to use php in this case, as JavaScript can parse JSON files much faster than PHP, and it makes much more sense not to mix these two types of code. I'd rather just make these variables in the JSON file ( var twit_collection = ... ) and include it into my html as I can. Look at this article here, the 49 upvoted answer (second answer) pretty much clarifies my point.

Regarding the comment on that answer: I didn't even notice but he used a string and parsed it to the JSON object. It is correct, but JavaScript accepts JSON object natively, such as:

var twit_collection = {array: [{key: value1}, {key: value2}, {key: value3}] };

So to make that answer completely right, just omit the apostrophes before and after the JSON object and ditch that JSON-parsing.

Thanks, this makes sense to me, however, loading the JSON from javascript is typically done as an AJAX call right? I would like to avoid introducing complicated code, i also dont want to use JQuery, adding another library etc. — fartagaintuxedo, Aug 05 '16 at 14:04
Sorry I meant the second answer (with 49 upvotes). That's the easiest solution for such problems, I just wonder why it isn't the accepted answer. — Daniel Grant, Aug 05 '16 at 14:08
Oh, you are right, thats great - yes, it seems to be the best way to go! — fartagaintuxedo, Aug 05 '16 at 14:09
I have just noticed that below the 49 vote answer there is a comment disapproving the solution with 33 votes. Your answer regarding PHP is still valid but i think the JS solution needs more revision, i will try both and see. — fartagaintuxedo, Aug 05 '16 at 14:18
That answer is correct in a kinda incorrect way. It passes the object as a string and converts it back, so basically it's good, but it does not make sense. I edited my answer: that is the fine solution. — Daniel Grant, Aug 05 '16 at 14:27

MattDiMu · Answer 2 · 2016-08-05T13:59:00.327

It probably makes sense to pass the variables right before your javascript-file using it. Generally it is seen as best practice in most cases to place JavaScript right above the closing </body> show the user as much of the website as early as possible. Then your html would look like this:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">

    </head>

    <body>
    <?php 
        $twit_collection=file_get_contents('cdtwbot_twit_collection.json');
        $tag_collection=file_get_contents('cdtwbot_tag_collection.json'); 
    ?>
        <script type="text/javascript">
            //pass PHP variables declared above to JavaScript variables
            var twit_collection = <?php echo $twit_collection; ?>;
            var tag_collection = <?php echo $tag_collection; ?>;
        </script>
  <script src="path/to/your/js/file.js"></script>



    </body>
</html>

If you need your javascript early, I'd recommend you to put it in your head AFTER your charset declaration (e.g. <meta charset="utf-8">)

@MarkusLaire - I wrote it correctly, but had a copy paste error. Fixed — MattDiMu, Aug 05 '16 at 13:59

score 0 · Answer 3 · answered Aug 05 '16 at 13:59

It would be a good idea to separate the logic from your view component.

controller.php

<?php
    $twit_collection=file_get_contents('cdtwbot_twit_collection.json');
    $tag_collection=file_get_contents('cdtwbot_tag_collection.json');
    include('view.php');

view.php

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            //pass PHP variables declared above to JavaScript variables
            var twit_collection = <?php echo $twit_collection; ?>;
            var tag_collection = <?php echo $tag_collection; ?>;
        </script>
    </head>

    <body>
        //document continues...
    </body>
</html>

As far as where the javascript should go, that depends on whether you need the variables before or after the DOM has loaded.

score -3 · Answer 4 · answered Aug 05 '16 at 13:57

-3

PHP automatically minifies your javascript and html code therefore echoing the whole page is optimal for user webpage load times but it is also more work on your server. However if your webpage is already minified then your above script would be optimal.

answered Aug 05 '16 at 13:57

David

609
1
4
11

1

There is no such automatic minification in PHP. – Markus Laire Aug 05 '16 at 14:01
Well it works for me in the latest php version. Have you tried echoing javascript from php? – David Aug 05 '16 at 14:04
Automatic minifying would be wrong to do because `echo` needs to output things exactly as they are. So this doesn't need to be tested. – Markus Laire Aug 05 '16 at 14:09
No minifying removes useless nonsense characters that make the file larger for the user to download but don't do anything for instance double spaces in html text are always output by the browser. There is therefore no need for a double space. Have a look https://codeshare.io/zhh2D. – David Aug 05 '16 at 16:10

Best place in html page for php block when passing variables to javascript

4 Answers4