0

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.

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));
| improve this answer | |
  • OK thanks for that. That was indeed an approach I had considered. Would you consider this best practice for something like this? It seems quite simple and secure to me. – cag8f Jan 28 at 11:46
  • No this is far from a best practice. Best is to define the root of your folder within a javascript variable and then load the json relatively from that URI. – Jim Jan 28 at 13:06
  • And please, if this works, would you be so friendly to upvote/select my answer? – Jim Jan 28 at 13:07
  • OK thanks for that. I'm definitely looking to implement best practice here, if I can. Can you maybe elaborate on what you described? If you can, do so in a new answer, so if I use it, I can mark it as the answer. – cag8f Jan 28 at 15:11
  • I tested this and confirms it works as advertised. Thank you! – cag8f Jan 30 at 10:29
1

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>
| improve this answer | |
  • OK thanks for this. I understand what you're doing here. But what is the advantage of this method, over the previous method you described? They are both relatively simple and painless. This new method seems like it actually has a couple more steps though. I should say that I already tested your above solution, and got it to work as expected. – cag8f Jan 29 at 10:28
  • If you want a clean method of handling Javascript you should look into Babel & ES6. – Jim Jan 29 at 13:31
  • OK thanks. But you've now offered two slightly different methods. Is there any advantage of one over the other? – cag8f Jan 29 at 13:41
  • If there are advantages of one versus the other, it will help me decide which to mark at the answer :-) – cag8f Jan 30 at 4:26
  • Well, the first answer does most of the processing work on the server side as PHP parses the json directly into javascript. The second answer processes most of the work on the client's side as it loads the file directly into the browser. Depends on your personal preference. Personally I'm not a big fan of using a third party library for something Javascript is capable of doing on it's own. I'd probably use the first solution. – Jim Jan 30 at 8:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.