loading...

Creating JSON Files with Eleventy

mattwaler profile image Matt Waler ・2 min read

TLDR: Here is a nifty way to export 11ty data to JSON so it can be consumed on the client side!

In 11ty, you are able to customize the filetype of the exported template just by appending any filetype to the permalink field.

In the following example, I am looping over a pretend posts collection inside 11ty to build a JSON file of data.

---
permalink: /api/posts.json
---
[
  {% for post in collections.posts  %}
    {% set data = post.data %}
    {
      "title": "{{ data.title }}",
      "description": "{{ data.description }}",
      "url": "{{ post.url }}"
    }{{ '' if loop.last else ',' }}
  {% endfor  %}
]

This template will output the following JSON file.

[
  {
    "title": "Fake Post 1",
    "description": "Quis platea ut dolor dictumst felis",
    "url": "/posts/1/"
  },
  {
    "title": "Fake Post 2",
    "description": "Quis platea ut dolor dictumst felis",
    "url": "/posts/2/"
  },
  {
    "title": "Fake Post 3",
    "description": "Quis platea ut dolor dictumst felis",
    "url": "/posts/3/"
  }
]

With this data now exported to a file in your site, you could consume it with a library like axios (or fetch if you're hardcore) in order to build out functionalities like search and sorting/filtering with a library like Svelte!

Here is how you would now access your new JSON file.

import axios from 'axios'
async function getPosts() {
  const { data } = await axios.get('/api/posts.json')
  return data
}

Note! You can also configure all files in a directory to output to JSON by adding a directory data file. That file can look something like this:

// File: /pages/api/api.11tydata.js
module.exports = {
  permalink: '/api/{{ page.fileSlug }}.json',
}

This will automatically export any templates inside this directory straight to JSON!

Eleventy is a fantastic platform and it has the potential to exceed traditional static site generation to include data files that can be consumed and made more dynamic on your site!

Posted on by:

mattwaler profile

Matt Waler

@mattwaler

Overly generous lover of pragmatic front-end development. In my off-time, you'll find me lifting, gaming, eating, and developing some more.

Discussion

pic
Editor guide
 

This works quite nicely except the quote marks are getting translated to their HTML equivalents and HTML tags are added, like this:
&quot;title&quot;: &quot;My Post Title&quot;,<br>

Might be related to this Eleventy issue:
github.com/11ty/eleventy/issues/402

Do you know how to make it stop doing that?

 

I solved it. i had made the template as a Markdown (.md) file, like the rest of my templates. I changed the suffix to .html and got the output I was looking for.

 

Awesome! I was going to come back to this and help debug because I've never witnessed that same issue. Glad you figured it out and thank you for reading!

 

Hi thanks for this, sorry Im late to this party. Would you mind expanding a little when you suggest "With this data now exported to a file in your site, you could consume it with a library like axios (or fetch if you're hardcore) in order to build out functionalities like search and sorting/filtering with a library like Svelte!"
Do you mean using it as an API for another site or using the data within the existing eleventy.js site? Thanks in advance.

 

In my example, I was referring to using the data on the same site. So, you could hit your new data route with axios or fetch, and use that JSON to power something like a real time search/filter on your blog listing page, possibly with a library like Fuse.js!

 

Thank you for the clarification :)

 
 

Thank you so much Ben!