How to include a JSON file on my page?

Question

I have a JSON file stored in my child theme directory: file.json). Separately, the PHP template for my page contains some JavaScript code (in the form of a <script> tag). In that JS code, I want to write the contents of the JSON file to a variable. What is the proper approach to this?

• Can/should I enqueue the JSON file, just as I would a normal JS file (i.e. wp_enqueue_scripts())? If so, how would I in-turn write the contents of the file to a JS variable? Would I do something like myJson = json.parse('http://example.com/wp-contents/themes/your-theme/file.json')?
• Can I just use include to include the JSON file on the page? Actually now that I think about it, one can only use include with certain file extensions--correct?
• Should I perhaps use PHP to save the contents of the JSON file to a PHP variable, then pass that variable to the JS code?

Thanks in advance.

Answer 1

You can do this with PHP indeed. The steps are as followed;

1. Get the contents of the JSON file within a variable using $json = file_get_contents('path-to-file.json')
2. Inside your <script> tags parse the JSON contents within a Javascript variable like this; var jsonContent = '<?= $json; ?>';
3. Debug the contents in your Javascript environment using the following; console.log(JSON.parse(jsonContent));

Answer 2

Sure thing, here's another method.

1. First, declare the root of your templates folder inside a javascript variable like this var rootFolder = '<?= get_template_directory_uri() ?>';
2. Set the location of your JSON file within a new variable like var jsonFile = rootFolder + '/json/file.json';
3. You can use jQuery to quickly grab the contents of the file like this

<script>
var rootFolder = '<?= get_template_directory_uri() ?>';
var jsonFile   = rootFolder + '/json/file.json';

$.getJSON(jsonFile, function(data) {

   // Log the data to check its validity
   console.log(data);

});
</script>