PHP json to a JavaScript variable inside an HTML file

I write the following script that creates a nice JSON of all the images under the current folder:

<?php
header('Content-type: application/json');

$output = new stdClass();
$pattern="/^.*\.(jpg|jpeg|png|gif)$/i"; //valid image extensions

$dirs = array_filter(glob('*'), 'is_dir');
foreach ($dirs as $dirname) {
  $files = glob(''.$dirname.'/*');
  $images = preg_grep($pattern, $files);
  
  $output->{$dirname} = $images;
}

echo json_encode($output, JSON_PRETTY_PRINT);
?>

I have an HTML file with a basic page and I want to display the JSON’s data in a formatted way after some javascript manipulation.

So the question is how can I get the PHP data into a javascript variable?

<html>
    ...
    <body>
        <script src="images.php"></script>
        <script type="text/javascript">
            // Desired: Get access to JSON $output
        </script>

        ...

        <div>
          <img ... >
        </div>

    </body>
</html>

I tried to put both https://stackoverflow.com/a/61212271/1692261
and https://stackoverflow.com/a/50801851/1692261 inside that script tag but none of them work so I am guessing I am missing something fundamental here (my ever first experience with PHP 🙂

Leave a Comment