data in front matter returned as "NaN"

[khoivan88]

Hi, first of all, thank you very much for an awesome tool. I have only been using 11ty for about 2 weeks now but it has been great.

I ran into this issue and after numerous failed attempts to search for answer, I was wondering if you might be able to help me

I have a file.html page using layout.njk. In the front matter of the file.html, I have this:

---
#other things
extra_top:
  epush-general: &epush-general
    id: epush-general
    title: 'General Info'

items:
  list:
  - <<: *epush-general
    leave_empty: true
  - id: example_questions
    title: Example Questions
#other things
---

  <li class="list-group-item py-5" id="{{ extra_top.epush-general.id }}">
    <div class="container-fluid">
    </div>
  </li>

Somehow, the id is "NaN" for the new <li> tag? and not id="epush-general" as I wanted. Would you know why?

I thought the yaml anchors might be the issue but I have another placeholder in the layout.njk with the following content and it outputted the "id" field just fine:

...
            <ul class="list-group list-group-flush">
                {%- for item in items.list %}
                    <li class="list-group-item py-5" id="{{ item.id }}">
                                <img src="{{ item.url | url }}" class="img-fluid" alt="{{ item.title }}">
                    </li>
                {%- endfor %}
            </ul>
...

Thank you very much for your help and for this great product!

[denisbrodbeck]

@khoivan88 I think there's an issue with the minus in epush-general:.

If I remove that, your example works for me.

---
title: Some Title
epushgeneral:
  id: epush-general
  title: 'General Info'
---

[khoivan88]

@denisbrodbeck that is very interesting. I recalled seeing some issue with dashes in the front matter. Is this the same issue?

the fact that it worked in the id={{ item.id }} threw me off the issue with dashes in variable name. But maybe because it was iterate over a list so it has never encounter the dash issue ?

I will give it a test and get back to you. Thank you very much for having a look!

[khoivan88]

@denisbrodbeck you are absolutely right, it was the dash issue. Do you have any idea why? Again, thank you so much for helping me with this!

[pdehaan]

@khoivan88 My guess would be because "epush-general" wouldnt be a valid JavaScript variable name due to the dash. You could either remove the dash, or try using object notation and see if that works for you:

extra_top["epush-general"].id

But I have to admit I'm not familiar with that &epush-general or *epush-general syntax in your front-matter, so not sure what those are doing.

---
extra_top:
  epush-general: &epush-general
    id: epush-general
    title: 'General Info'

items:
  list:
  - <<: *epush-general
    leave_empty: true
  - id: example_questions
    title: Example Questions
---

[khoivan88]

@pdehaan , oh, I didn't know you cannot have dash in Javascript variable name. I did end up with using underscore and it works. Thank you for your suggestion with the object notation, it is good to know there is another way.

Also, I thought that if you don't declare the language in front matter, it is default to yaml?

Anyway, the syntax I use is anchor and extension in yaml

[denisbrodbeck]

Also, I thought that if you don't declare the language in front matter, it is default to yaml?

It is yaml, but probably with a little bit of extra magic during the conversion to JS data 😃

[sasrit]

@khoivan88 I think there's an issue with the minus in epush-general:.

If I remove that, your example works for me.

---
title: Some Title
epushgeneral:
  id: epush-general
  title: 'General Info'
---

Two years later, same mistake. Thanks @denisbrodbeck !