Access child elements in front matter without knowing their names

[werls]

Hi! I'm really impressed with all the creative possibilities using eleventy. I must say that I still consider myself a beginner programmer and eleventy was my first direct contact with template systems like liquid and nunjucks.

I have a question: is that possible to access child elements in front matter data without knowing their names?

Here's my example. I'm using the front matter in a md file to set a bunch of links that I want it to be listed on the page:

---
links:
  - behance: https://be.net
  - pinterest: https://pinterest.com
  - instagram: https://instagram.com
---

The names and links will be different on each page, so I cannot know their names in advance. My goal is to render an html block with a list of the names, each one wrapped in a a tag with an attribute href for the respective links, like this:

<ul>
{% for link in links %}
  <li><a href={{ link.url }}></p>{{ link.name }}</p></a></li>
{% endfor %}
<ul>

As the .url and .name keys don't exist, this is not a real possibility. And, if I render a {{ link }} instead, I'm getting a [object] [Object] string.

[pdehaan]

If you don't mind tweaking your front matter slightly this seems to work w/ Nunjucks:

---
# Note that I converted it from arrays w/ 1 key/value to an object.
links:
  behance: https://be.net
  pinterest: https://pinterest.com
  instagram: https://instagram.com
---

<ul>
  {% for name, url in links %}
  <li><a href="{{ url }}">{{ name }}</a></li>
  {% endfor %}
</ul>

LiquidJS doesn't support the same array looping syntax (so I had to use array notation), but this tweak worked.

"When iterating a hash, item[0] contains the key, and item[1] contains the value"
— via https://liquidjs.com/tags/for.html

---
links:
  behance: https://be.net
  pinterest: https://pinterest.com
  instagram: https://instagram.com
---

<ul>
  {% for link in links %}
  <li><a href="{{ link[1] }}">{{ link[0] }}</a></li>
  {% endfor %}
</ul>

---

Where your original YAML:

links:
  - behance: https://be.net
  - pinterest: https://pinterest.com
  - instagram: https://instagram.com

Converts to the following JSON:

{
  "links": [
    {
      "behance": "https://be.net"
    },
    {
      "pinterest": "https://pinterest.com"
    },
    {
      "instagram": "https://instagram.com"
    }
  ]
}

[pdehaan]

Although, if you switch from an array of objects to an object, I believe you'll get the following errors if you need to have two links with the same key (ie: two "instagram" links):

[11ty] 1. Having trouble reading front matter from template ./src/liquid.liquid (via TemplateContentFrontMatterError)
[11ty] 2. duplicated mapping key at line 6, column 3:

[werls]

Thank you, Peter! This solution worked perfectly!

[btrem]

If someone needs a solution for the situation described in comment #2425 (reply in thread), you could modify the frontmatter object so that keys are unique:

---
links:
  behance: https://be.net
  pinterest: https://pinterest.com
  instagram:
    - https://instagram.com
    - https://instagram2.com
---

Then in nunjucks, do this:

<ul>
  {% for name, url in links %}
    {% if url is string %}
      <li><a href="{{ url }}">{{ name }}</a></li>
    {% else %}
      {% for item in url %}
        <li><a href="{{ item }}">{{ name }}</a></li>
      {% endfor %}
    {% endif %}
  {% endfor %}
</ul>