Search code examples
for-loopyamljekyll

Accessing nested data in Jekyll for loop


I'm having a little bit of a hard time getting my head around accessing some nested data with Jekyll. I'm hoping someone can help me out. I'm trying to access data within a prototypes.yml file. It's for populating cards on a dashboard. When I run the loop, however, nothing gets returned. My guess is I'm not targeting the details correctly, but ultimately I'm at a bit of a loss.

prototypes.yml

ios:
  details:
    -
      category: "category"
      title: "title"
      desc: "desc"
      author: "Sean"
      update: "12 Feb 2020"

android:
  details:
    -
      category: "category"
      title: "title"
      desc: "desc"
      author: "Sean"
      update: "12 Feb 2020"

HTML

{% for row in site.data.prototypes %}
  {% for detail in row.details %}
  <a href="{{ detail.permalink }}" class="c-card c-card--{{ detail.category }}">
    <h2>{{ detail.title }}</h2>
    <p>{{ detail.desc }}</p>
    <span>{{ detail.update }}</span>
  </a>
  {% endfor %}
{% endfor %}

Solution

  • row contains two values, the key (e.g. ios) and its value. So you'll need

    {% for row in site.data.prototypes %}
      {% for detail in row[1].details %}
      <a href="{{ detail.permalink }}" class="c-card c-card--{{ detail.category }}">
        <h2>{{ detail.title }}</h2>
        <p>{{ detail.desc }}</p>
        <span>{{ detail.update }}</span>
      </a>
      {% endfor %}
    {% endfor %}