11ty / eleventy

A simpler site generator. Transforms a directory of templates (of varying types) into HTML.
https://www.11ty.dev/
MIT License
16.92k stars 491 forks source link

Pagination on nested data #294

Closed jloh closed 5 years ago

jloh commented 5 years ago

Sorry if I should be asking this question elsewhere, but I'm trying to create a data driven website and am wondering whether its possible to paginate on my data if its not in a array.

I basically want to group on a certain key which I can do with my current structure (see below) using the group key and the groupby utility.

My current structure is a big array and I can paginate off it and display it on my index page:

[
  {
    "code": 200,
    "title": "Found",
    "group": "2XX"
  },
  {
    "code": 301,
    "group": "3XX",
    "title": "Moved Permanently",
    "description": "Hello\nThis is on a new line\n",
    "nav": "warning"
  }
]

Index:

{% for group,c in codes | groupby("group")%}
  <h2 class="title">{{ group }}</h2>
  <ul>
  {% for status in c %}
    <li><a href="/{{ status.code }}">{{ status.code }} - {{ status.title }}</li>
  {% endfor %}
  </ul>
{% endfor %}

Pages:

pagination:
  data: codes
  size: 1
  alias: code
permalink: "{{ code.code }}/index.html"
---

<actual page content in here>

This all works fine, no issues so far! What I'm wondering is whether its possible to structure my data differently but still achieve the above. I'd like to structure it like this (or something like it):

{
  "2XX": {
    "200": {
      "title": "Found"
    }
  },
  "3XX": {
    "301": {
      "title": "Moved Permanently"
    }
  }
}

And group on the first set of keys, looping over each array inside it (ie each array under 2XX) and again, paginating on those. I'm 99% sure this isn't possible but just thought I'd check!

Apologies if this doesn't make any sense! I'm loving 11ty so far though!

Edit: Forgot to mention I'm using Nunjucks templates so the specific group by stuff should likely be asked there, I guess I'm just curious about the pagination ability!

edwardhorsford commented 5 years ago

Could you make a custom collection that transforms the data in to a flatter structure at compile time?

jloh commented 5 years ago

I ended up munging the data into a list using a node.js script, sorry this probably isn't the solution anyone who stumbles upon this is hoping for!