How to load a JSON file via AJAX?

Support
1

I’m trying to add a .json file to my Grav site and access it via AJAX (JQuery), and I did what it says here:

  1. Created the twig file at /templates/myfile.json.twig.
  2. Put the JSON data into that twig file.
  3. Went to localhost/myfile.json.
  4. Browser says “Woops. Looks like this page doesn’t exist.”.
  5. But it shows up when I include it in base.html.twig, for example, with {% include 'myfile.json.twig' %}.

But I’d like to access the JSON file via AJAX, not as an include. How can I do that?

Please help.

2

Do you have a page with the /myfile slug? If not, no wonder you get the error

3

Just to clarify what @Karmalakas says, you need a markdown file under your user/pages directory called myfile.md, just like you would for HTML templates.

1 Like
4

Thanks for your friendly response and clarification, Hugh, much appreciated. I’ll give that a try. I assume I have to create the page in the Grav Dashboard, as well? If so, what do I put for “Folder Name” since I want the json file to appear at the root level (ie. localhost/myfile.json).

Just some potentially helpful feedback: It would have helped if the step of putting the page (the /md file) in place were more clear in the docs - Because it currently says, “If your page was defined by a page with filename of blog-item.md, Grav in turn looks for a Twig template called blog-item.html.twig to render the page.” The word “if” threw me off, implying it being optional. Because this is describing a different content type I thought there may be a different way of serving that content type, since it isn’t a “page” but a .json file. Anyway, thanks again, Hugh.

5

Folder is the path. MD file is the template. You should have something like:

/user/pages/myfilepath/myfiletemplate.md

When you visit /myfilepath, it will try to load myfiletemplate.html.twig by default. If you visit /myfilepath.json, it will try to load myfiletemplate.json.twig

6

Okay, got it working. Boy, that’s confusing, though. Definitely not what I got from the docs, but maybe that’s just me.

A file called “default.md” was created in the folder when I created the page in the Dashboard, as expected. But I don’t think I can (or should) change that filename, correct? Because it seems to be a pre-set value in the Dashboard template dropdown (and I’m not sure why). So I didn’t change it, even though it would make it more clear if I did change it (say, from default.md to myfile.md).

I changed the twig file to be named default.json.twig in /templates/ (from myfile.json.twig) and it worked, which, to me, is confusing, but I do understand it now.

What if I wanted to serve multiple .json files from the root - then I’d have to change one of those default.md files to be something else, correct? But would that break it in the Dashboard somehow?

7

If you open the Advanced tab of that page in the admin, you can change the template there. After saving, MD file name changes

1 Like
8

Create a page (e.g. /user/pages/05.json/) and set its template to myfile.json.twig in the frontmatter. Then access it via /json and load it with jQuery:

$.getJSON(‘/json’, data => console.log(data));

Alternatively, put a raw .json file in /user/data/ and fetch it directly.