How to load a JSON file via AJAX?

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:
https://learn.getgrav.org/16/content/content-types

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.

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

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.

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.

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

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?

@osagrav:
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?

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

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.