Passing a Big Complicated Data Structure in PHP directly into the client context in Javascript. (no magic)

sending_json.php

<?php // an example showing how to embed JSON in an embedded script in an html file

function big_complicated_data_grab () {
        // we'll just create some sort of thing that makes JSON interesting :)
        $bcdg =  array (
            "fruits"  => array("a" => "orange", "b" => "banana", "c" => "apple"),
            "numbers" => array(1, 2, 3, 4, 5, 6),
            "holes"   => array("first", 5 => "second", "third"),
            "lorem"   => "Lorem i'psum dolor s'it amet, consectetur adipisicing elit, \"sed do' eiusmod tempor\" incididunt ut lab'ore 'et' dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. \"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\" Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
            'thurips' => 'halloway',
            17 => "'give me a nickel', he said. \"NO WAI!!\", she said.",
            "a","b","c",
        );
        return $bcdg;
}


$bcdg = big_complicated_data_grab();

// see what the BCDG looks like to PHP:
echo "<pre>" . PHP_EOL;
var_dump($bcdg) . PHP_EOL;
echo "</pre>" . PHP_EOL;

// convert it to a JSON string
$bcdg_json = json_encode($bcdg);

// see what the JSON string looks like to PHP:
echo "<pre>" . PHP_EOL;
echo $bcdg_json . PHP_EOL;
echo "</pre>" . PHP_EOL;


// now pass the string into the local client context in a script:
echo "<script>" . PHP_EOL;
echo "const Foo = " . $bcdg_json . ';'  . PHP_EOL;

// see what the BCDG looks like to the client's javascript
echo "console.log(Foo);"  . PHP_EOL;
echo "</script>"  . PHP_EOL;

// peruse the HTML output to see what has happened. No special quoting, parsing, etc., needed.

zz_rendered.html

<pre>
array(9) {
  ["fruits"]=>
  array(3) {
    ["a"]=>
    string(6) "orange"
    ["b"]=>
    string(6) "banana"
    ["c"]=>
    string(5) "apple"
  }
  ["numbers"]=>
  array(6) {
    [0]=>
    int(1)
    [1]=>
    int(2)
    [2]=>
    int(3)
    [3]=>
    int(4)
    [4]=>
    int(5)
    [5]=>
    int(6)
  }
  ["holes"]=>
  array(3) {
    [0]=>
    string(5) "first"
    [5]=>
    string(6) "second"
    [6]=>
    string(5) "third"
  }
  ["lorem"]=>
  string(455) "Lorem i'psum dolor s'it amet, consectetur adipisicing elit, "sed do' eiusmod tempor" incididunt ut lab'ore 'et' dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur." Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  ["thurips"]=>
  string(8) "halloway"
  [17]=>
  string(50) "'give me a nickel', he said. "NO WAI!!", she said."
  [18]=>
  string(1) "a"
  [19]=>
  string(1) "b"
  [20]=>
  string(1) "c"
}
</pre>
<pre>
{"fruits":{"a":"orange","b":"banana","c":"apple"},"numbers":[1,2,3,4,5,6],"holes":{"0":"first","5":"second","6":"third"},"lorem":"Lorem i'psum dolor s'it amet, consectetur adipisicing elit, \"sed do' eiusmod tempor\" incididunt ut lab'ore 'et' dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. \"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\" Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.","thurips":"halloway","17":"'give me a nickel', he said. \"NO WAI!!\", she said.","18":"a","19":"b","20":"c"}
</pre>
<script>
const Foo = {"fruits":{"a":"orange","b":"banana","c":"apple"},"numbers":[1,2,3,4,5,6],"holes":{"0":"first","5":"second","6":"third"},"lorem":"Lorem i'psum dolor s'it amet, consectetur adipisicing elit, \"sed do' eiusmod tempor\" incididunt ut lab'ore 'et' dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. \"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\" Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.","thurips":"halloway","17":"'give me a nickel', he said. \"NO WAI!!\", she said.","18":"a","19":"b","20":"c"};
console.log(Foo);
</script>