How to include a JSON file on my page?

  • Resolved Carl Gross

    (@carlgross)


    4 years, 10 months ago

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

    Should I enqueue the JSON file, just as I would a normal JS file (i.e. wp_enqueue_scripts)? If so, how would I write the contents of the file to a JS variable? Would I do something like myJson = json.parse('file.json')?

    Or can I just use include to include the JSON file on the page?

    Or 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.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator bcworkz

    (@bcworkz)

    Your JS script could request the file directly from the server and parse the returned content. jQuery offers the .getJSON() method to do so. You could instead make a XMLHttpRequest using straight JS. See https://stackoverflow.com/a/12460434 and the answer below.

    Alternately, PHP could read the file and parse the content. Pass needed values to the page’s JS with wp_localize_script(). Consider doing whatever processing with PHP and simply outputting the results instead of doing so with JS. I believe the result would be more performative.

    The PHP include statement only works for other PHP files, including a JSON file will cause syntax errors.

    Thread Starter Carl Gross

    (@carlgross)

    OK thanks very much for this. I’m leaning towards the second solution you mentioned–define a PHP variable with the JSON contents, then pass it to my JS code. To be clear though, the JavaScript code in-question is in a <script> tag inside my PHP template. So I would have to do something like this:

    1. In my PHP code, get the contents of the JSON file within a PHP variable, e.g. $json = file_get_contents('path-to-file.json')

    2. Inside my <script> tags write the aforementioned PHP variable to a JS variable, using something like this: var jsonContent = '<?= $json; ?>';

    Would you see any issues with that course of action?

    I actually asked this in a Stack Overflow question yesterday (see here). There was only one reply. That person also suggested this method, but in addition, said it was not best practice. Any idea why he would say that?

    Moderator bcworkz

    (@bcworkz)

    Your approach will likely work. I agree it’s not best practice. Inline scripts in general do not follow WP best practice. They are more difficult to optimize and could cause conflicts with other code in different installations even if it works in yours. You may not care about other installations, but best practices do.

    All JS script should be properly enqueued so that WP and optimization plugins can output script references in optimal order and position. Granted, doing so may be overkill for very basic, short scripts. Such code is less likely to conflict or be meaningfully optimized.

    Thread Starter Carl Gross

    (@carlgross)

    >> Inline scripts in general do not follow WP best practice.

    OK yes, that I understand. I’m in talks to move it to a separate JS file and enqueue it properly.

    Thanks very much. We can consider this resolved.

    Thread Starter Carl Gross

    (@carlgross)

    @bcworkz I’ve come here to say that I have now indeed moved the JS code in-question out of a <script> tag, and into its own JS file. I have a question for you.

    A couple weeks ago you suggested this approach to accomplish what I want.

    >> Alternately, PHP could read the file and parse the content. Pass needed values to the page’s JS with wp_localize_script(). Consider doing whatever processing with PHP and simply outputting the results instead of doing so with JS. I believe the result would be more performative.

    By ‘performative,’ are you saying this should, in theory, require less page load time?
    If so, Why do you think that? Is it because the other solution you suggested requires the addition of an extra network connection (via wp_enqueue_script())?

    I’m not arguing with you. I’m now at a point where I can use either of your suggestions, and I’m trying to pick the best ??

    Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to include a JSON file on my page?’ is closed to new replies.