Jekyll nested front matter not displaying in layout template for loop

Question

I am trying to loop over a nested list in my posts font matter and display an associated image (using svg) for each nested item

post front matter:

---  
layout: post
title: title of this post
spec:
- name: tee
- name: mobile
---  

using a for loop in my post.html file

<div>
    <h4>specs</h4>

    {% for item in page.spec %}
    <svg class='spec-icon'><use xlink:href="#icons_{{item.name}}"/</svg>
    {% endfor %}

</div>

I would like this to render like below

 <div>
     <h4>specs</h4>

     <svg class='spec-icon'><use xlink:href="#icons_tee"/></svg>
     <svg class='spec-icon'><use xlink:href="#icons_mobile"/></svg>

 </div>

for every neseted name:vale pair under spec:, I would like there to be a unique svg element created with that nested value included in the #id

???

Answer 1

Try this:

---  
layout: post
title: title of this post
spec: [tee, mobile]
---  

Then:

<div>
    <h4>specs</h4>

    {% for item in page.spec %}
    <svg class='spec-icon'><use xlink:href="#icons_{{ item }}"/</svg>
    {% endfor %}

</div>

Hope to have helped! Let me know if this works, yeah?