Yaml front matter loop error (?)

Help
1

Hello jekyll-talk community!

Currently, I am trying to create a filter list that responds to some javascript. The js part is fine, I have some similar yet smaller loops that are working.
Basically, the idea is the got a working html-link that has a href-value different to the text displayed. As all my filter links are in lowercase and the the filter option contain more than one word, I wanted to create a nested (?) yaml front matter.

Here it it is:

---
filters:
   - category:
     - name: "All"
     - link: "all"
   - category:
     - name: "For Women"
     - link: "women"
   - category:
     - name: "For Men"
     - link: "men"
   - category:
     - name: "Accessories"
     - link: "accessories"
   - category:
     - name: "Others"
     - link: "others"
---

and there is my liquid loop:

<ul class="categories container">
  {% for item in page.filters %}
  {% for outcome in item.category %}

  <li><a href="#{{ link.category }}">{{ name.category }}</a></li>

  {% endfor %}
  {% endfor %}
</ul>

After compiling, this is my html outcome.

    <ul class="categories container">
    <li><a href="#{"name"=>"All"}{"link"=>"all"}">{"name"=>"All"}{"link"=>"all"}</a></li>
    <li><a href="#{"name"=>"For Women"}{"link"=>"women"}">{"name"=>"For Women"}{"link"=>"women"}</a></li>
    <li><a href="#{"name"=>"For Men"}{"link"=>"men"}">{"name"=>"For Men"}{"link"=>"men"}</a></li>
    <li><a href="#{"name"=>"Accessories"}{"link"=>"accessories"}">{"name"=>"Accessories"}{"link"=>"accessories"}</a></li>
    <li><a href="#{"name"=>"Others"}{"link"=>"others"}">{"name"=>"Others"}{"link"=>"others"}</a></li>
    </ul>

I’ve tried many combinations/variations but this is by far the nearest I’ve come. My compilation log is also clear, no errors at this one.

Do you have any idea how I can get it to work? Thanks and greetings,

Adrian

2

this page has some great yaml examples, link is to nested lists:

I think you could do:

- category
  - name: "All"
    link: "all"
   -name: "For Women"
    link: "women"

but it also depends on what all else you have under filters - if this is it, then I think you can drop the category part.

I think your liquid also needs help, you have 2 for loops - not sure why, your output isn’t what I would expect.

I think it would be more like:

<ul class="categories container">
  {% for item in page.filters.category %} 
  <li><a href="#{{ item.link }}">{{ item.name }}</a></li>
  {% endfor %}
</ul>

that is untested, probably not perfect, and it also depends on what the yaml really is - is it filters, or category (careful with that word as it is a thing on its own).

The link above has great examples, and just about all use cases.

3

Hey rdyar,

thank you for your quick and useful reply! I’ve managed to get it to work and I’m happy with the result.
The cheatsheet really helped, thanks again! :slight_smile:

It is filters, but showing categories. That’s how I’d describe it.

Cheers!