Liu Kang
Liu Kang

Reputation: 1389

Nested liquid loop in Jekyll does not iterate multiple sub-items corrently

I have a .yml-file that contains companies. Each company have sub-items, and each sub-item also have tags. It looks like this:

YAML

- name: acme
  subfolderitems:
    - item: books
      item-url: http://acme.com/books
      item-tag:
        - Nice book
        - Cool books
        - Wow books

I want to display the company names in a table on each row, together with the tags. Right now I am using this solution:

Code

<table>
{% for company in site.data.companies %}
{% for subfolderitem in company.subfolderitems %}
{% if subfolderitem.item == page.ref %}
    <tr>
        <td>{{ company.name }}</td>
        <td>{% for subfolderitem in company.subfolderitems %}<span class="tag">{{ subfolderitem.item-tag }}</span>{% endfor %}</td>
    </tr>
{% endif %}
{% endfor %}
{% endfor %}
</table>

Frontmatter (for books)

---
layout: page
ref: books
title: Books
---

My problem is that the loop for the tags is not working as intended.

Output

<table>
  <tbody>
    <tr>
      <td>acme</td>
      <td><span class="tag">Nice bookCool booksWow books</span></td>
    </tr>
  </tbody>
</table>

Desired output should instead be this <span class="tag">Nice book</span><span class="tag">Cool books</span><span class="tag">Wow books</span>

Any suggestions?

Upvotes: 1

Views: 351

Answers (1)

David Jacquel
David Jacquel

Reputation: 52829

If you use inspect filter :

<span class="tag">{{ subfolderitem.item-tag | inspect }}</span>

You can see that the tags array is printed in one time. You need to add another loop to print tags one by one.

<table>
{% for company in site.data.companies %}
{% for subfolderitem in company.subfolderitems %}
{% if subfolderitem.item == page.ref %}
  <tr>
    <td>{{ company.name }}</td>
    <td>{% for subfolderitem in company.subfolderitems %}
        {% for tag in subfolderitem.item-tag %}
        <span class="tag">{{ tag }}</span>
        {% endfor %}
        {% endfor %}</td>
    </tr>
{% endif %}
{% endfor %}
{% endfor %}
</table>

Upvotes: 2

Related Questions