Accessing _data in Jekyll (loop in loop)

6
votes

Given this YAML:

- maincategory:
    title: "Projects"
    subcategory:
        title: "General"
        item:
          title: "Alpha"
        item:
          title: "Beta"

- maincategory:
    title: "Support"
    subcategory:
        title: "General"
        item:
          title: "Something"
        item:
          title: "Else"

How would one iterate over this data if the Jekyll _data file is called entries.yml?

So far I've gotten here but I'm not sure whether I should keep referencing the site.data oject in sub-loops. Also not sure whether this is even possible.

  {% for entry in site.data.entries %}
    <h2>{{ entry.maincategory.title }}</h3>
    {% for subcategory in site.data.entries.maincategories %}
      <h3>{{ entry.maincategory.subcategory.title }}</h3>
      <ul>
      {% for item in site.data.entries.maincategory.subcategories %}
        <li><a href="{{ item.href }}">{{ item.title }}</a></li>
      {% endfor %}
    </ul>
    {% endfor %}
  {% endfor %}

To be clear, this is where I want to end up (output wise):

<!-- Loop over every main category -->
<h2>Main category title</h2>
<!-- Loop over every sub category within main category -->
<h3>Subcategory title</h3>
<ul>
  <!-- Loop over every item in this subcategory -->
  <li><a href="#">Item title</a>
</li>
1
jekyllliquid

1 Answers

6
votes

YAML:

- title: "Projects"
  subcategories:
    - title: "project-sub1"
      items:
        - title: "project-sub1-item1"
          href: "#"
        - title: "project-sub1-item2"
          href: "#"
    - title: "project-sub2"
      items:
        - title: "project-sub2-item1"
          href: "#"
        - title: "project-sub2-item2"
          href: "#"

- title: "Support"
  subcategories:
   - title: "support-sub1"
     items:
      - title: "support-sub1-item1"
        href: "#"
      - title: "support-sub1-item2"
        href: "#"

Nested loops:

{% for entry in site.data.entries %}
  <h2>{{ entry.title }}</h2>
  {% for subcategory in entry.subcategories %}
    <h3>{{ subcategory.title }}</h3>
    <ul>
    {% for item in subcategory.items %}
      <li><a href="{{ item.href }}">{{ item.title }}</a></li>
    {% endfor %}
    </ul>
  {% endfor %}
{% endfor %}

Output:

<h2>Projects</h3>

  <h3>project-sub1</h3>
  <ul>
    <li><a href="#">project-sub1-item1</a></li>
    <li><a href="#">project-sub1-item2</a></li>
  </ul>

  <h3>project-sub2</h3>
  <ul>
    <li><a href="#">project-sub2-item1</a></li>
    <li><a href="#">project-sub2-item2</a></li>
  </ul>

<h2>Support</h3>

  <h3>support-sub1</h3>
  <ul>
    <li><a href="#">support-sub1-item1</a></li>
    <li><a href="#">support-sub1-item2</a></li>
  </ul>