DEV Community

Cover image for Render a JSON page in Astro
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

Render a JSON page in Astro

I've been working on a search solution for my Astro blog, and building search on top of static site generators is always tricky.

My general idea would be to do it almost the same as my Eleventy search.

Creating a JSON page in Astro

However, I quickly realized Astro doesn't have a neat permalink structure by default.

Trying out some things, I learned that we could create pages like search.json.astro.

These will render as http://yoursite.com/search.json

But let's see how we can render a JSON response of all our blog posts in there.

Astro has the cool built-in fetch method for internal pages so let's use that first.

const allPosts = Astro.fetchContent('./posts/*.md');
Enter fullscreen mode Exit fullscreen mode

In the next step, I'd like to map these to the output that I can use, which only needs the following three elements.

  • title
  • description
  • slug

Let's see how that would look:

allPosts.map((p) => {
  return {
    title: p.title,
    description: p.description,
    slug: p.url,
  };
});
Enter fullscreen mode Exit fullscreen mode

However, let's create a variable from this, and JSON stringify the output.

const json = JSON.stringify(
  allPosts.map((p) => {
    return {
      title: p.title,
      description: p.description,
      slug: p.url,
    };
  })
);
Enter fullscreen mode Exit fullscreen mode

Now all that's left is to render the JSON output on the page.

// All our code
---
{json}
Enter fullscreen mode Exit fullscreen mode

And that's it. We can now leverage a simple JSON file for our search to use.

You can find my example code on the following file.
Or see the end JSON file here.

Note: This process might change if Astro will support this eventually, but for now, this seems like an excellent approach.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Top comments (4)

Collapse
 
waylonwalker profile image
Waylon Walker

I love rendering out a bunch of content with a map. Is it really this easy in astro? The last SSG I used was gatsby, and graphql always felt like it made it harder for me.

const allPosts = Astro.fetchContent('./posts/*.md');
Enter fullscreen mode Exit fullscreen mode

This looks so easy

Collapse
 
dailydevtips1 profile image
Chris Bongers

Yep!

For me that's a really powerful concept from Astro!
However 11ty for instance also has a similar easy approach.

Collapse
 
jonas_duri profile image
Jonas Duri

Thanks for your post, however, Astro doesn't render an actual JSON file, but an HTML file like:

It was to nice to be true :D

<html><body>{ "foo": "bar" }</body></html>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
dailydevtips1 profile image
Chris Bongers

Yep aware of it, that's why this is the hacky version of it.
They are working on a more permanent solution for different file extensions.