Having trouble creating individual events pages from _data/events.json

[cocodedesigns]

I am posting this here and on Stack Overflow to see if I can get some help. I am truly lost

I have an events.json file in my _data folder. It contains a list of events, grouped by date.

{
    "2025-03-10": [
        {
            "slug": "confidence-building-training-03-10",
            "time": "15:00",
            "event": "Confidence Building Training",
            "description": "Information about the training session.",
            "location": "1 Any Street, This Place, A12 3BC",
            "organiser": "Nathan Hawkes",
            "image": "/images/events/confidence-workshop.jpg"
        }
    ],
    "2025-04-10": [
        {
            "slug": "confidence-building-training-04-10",
            "time": "15:00",
            "event": "Confidence Building Training",
            "description": "Information about the training session.",
            "location": "1 Any Street, This Place, A12 3BC",
            "organiser": "Nathan Hawkes",
            "image": "/images/events/confidence-workshop.jpg"
        },
        {
            "slug": "confidence-building-training-04-10-02",
            "time": "18:00",
            "event": "Evening Confidence Workshop",
            "description": "An additional session for those who prefer evening workshops.",
            "location": "2 Another Road, That Town, B34 5CD",
            "organiser": "Nathan Hawkes",
            "image": "/images/events/evening-workshop.jpg"
        }
    ],
    "2025-05-20": [
        {
            "slug": "confidence-building-training-05-20",
            "time": "15:00",
            "event": "Confidence Building Training",
            "description": "Information about the training session.",
            "location": "1 Any Street, This Place, A12 3BC",
            "organiser": "Nathan Hawkes",
            "image": "/images/events/confidence-workshop.jpg"
        }
    ]
}

I have an event.11ty.js file in my src folder:

module.exports = function(eleventyConfig) {
    const eventsData = require("./_data/events.json"); // Load the events data
  
    let eventPages = []; // Array to hold each page's data
  
    // Loop through the events and create a page for each one
    Object.keys(eventsData).forEach((date) => {
      eventsData[date].forEach((event) => {
        // Create an object for each event with permalink and data
        eventPages.push({
          permalink: `/event/${event.slug}/`, // Set the URL for the page
          data: {
            layout: "event.njk", // Specify the layout for the page
            event: event.event, // Event name
            time: event.time, // Event time
            description: event.description, // Event description
            location: event.location, // Event location
            organiser: event.organiser, // Event organiser
            image: event.image // Event image
          }
        });
      });
    });
  
    return eventPages; // Return an array of event page data
  };

I have an events calendar that uses the JSON file to add events to the calendar. It then links to each individual event page. However, when I run npx eleventy --serve, I am getting this in Terminal:

[11ty] Problem writing Eleventy templates:
[11ty] 1. Having trouble writing to "./public/event/index.html" from "./src/event.11ty.js" (via EleventyTemplateError)
[11ty] 2. The return value from the render function for the 11ty.js template was not a String or Buffer. Received [object Object],[object Object],[object Object],[object Object]

I have been trying multiple things, even using ChatGPT to try and find solutions (I know, I know). Nothing seems to be working. Is there any help anyone can give me?

[pdehaan]

I think you need to use pagination to render multiple pages based on an array of stuff. https://www.11ty.dev/docs/pagination/
(specifically the 11ty.cjs syntax since you look like you're using commonjs style)

The error seems to imply the event.11ty.js file's render() function needs to return a String or Buffer, but you're returning an array of objects that it doesn't know how to process. You can also find more details on the .11ty.js/.11ty.cjs file format at https://www.11ty.dev/docs/languages/javascript/.

[pdehaan]

I fear this wasn't a satisfactory answer, and I was bored, so this might get you closer:

// events.11ty.cjs
exports.data = function () {
  return {
    pagination: {
      data: "events",
      size: 1,
      alias: "e",
      before(_, { events }) {
        return Object.entries(events).reduce((acc, [date, arr]) => {
          arr.forEach((event) => acc.push({ ...event, date }));
          return acc;
        }, []);
      },
    },
    layout: "event.njk",
    eleventyComputed: {
      date({ e }) {
        return new Date(`${e.date} ${e.time}`);
      },
      permalink({ e }) {
        return `events/${e.slug}/`;
      },
      title({ e }) {
        return e.event;
      },
    },
  };
};

---
# _includes/event.njk
---

<!-- this is via `eleventyComputed` so don't need the pagination `e.` prefix. -->
<h1>{{ title }}</h1>

<dl>
  <dt>date:</dt>
  <!-- this is via `eleventyComputed` so don't need the pagination `e.` prefix. -->
  <dd>{{ date }}</dd>

  <dt>date:</dt>
  <dd>{{ e.date }}</dd>

  <dt>time:</dt>
  <dd>{{ e.time }}</dd>

  <dt>slug:</dt>
  <dd>{{ e.slug }}</dd>

  <dt>description:</dt>
  <dd>{{ e.description }}</dd>

  <dt>location:</dt>
  <dd>{{ e.location }}</dd>

  <dt>organiser:</dt>
  <dd>{{ e.organiser }}</dd>

  <dt>image:</dt>
  <dd>{{ e.image }}</dd>
</dl>

And my build output:

npm run build

> [email protected] build
> eleventy

[11ty] Writing ./www/events/confidence-building-training-03-10/index.html from ./src/events.11ty.cjs
[11ty] Writing ./www/events/confidence-building-training-04-10/index.html from ./src/events.11ty.cjs
[11ty] Writing ./www/events/confidence-building-training-04-10-02/index.html from ./src/events.11ty.cjs
[11ty] Writing ./www/events/confidence-building-training-05-20/index.html from ./src/events.11ty.cjs
[11ty] Wrote 4 files in 0.07 seconds (v3.0.0)

… and a random generated page:

<!-- this is via `eleventyComputed` so don't need the pagination `e.` prefix. -->
<h1>Evening Confidence Workshop</h1>

<dl>
  <dt>date:</dt>
  <!-- this is via `eleventyComputed` so don't need the pagination `e.` prefix. -->
  <dd>Thu Apr 10 2025 18:00:00 GMT-0700 (Pacific Daylight Time)</dd>

  <dt>date:</dt>
  <dd>2025-04-10</dd>

  <dt>time:</dt>
  <dd>18:00</dd>

  <dt>slug:</dt>
  <dd>confidence-building-training-04-10-02</dd>

  <dt>description:</dt>
  <dd>An additional session for those who prefer evening workshops.</dd>

  <dt>location:</dt>
  <dd>2 Another Road, That Town, B34 5CD</dd>

  <dt>organiser:</dt>
  <dd>Nathan Hawkes</dd>

  <dt>image:</dt>
  <dd>/images/events/evening-workshop.jpg</dd>
</dl>

[cocodedesigns]

Oh, you are an absolute diamond. I have been using Eleventy for about two weeks, so I'm not quite sure what it can or cannot do yet. This is just brilliant, I really appreciate it.