Front matter using yaml get the type wrong

I have a param in front matter that look like this:

---
ids: [123, 456]
---

When I do console.log({{.Params.ids}}) in single.html I get ['123', '456']
I was expecting it to be [123, 456]
Same output using JSON format

{
  ids: [123, 456]
}

Is this a bug or something that is expected?


I was trying to create a script that loop through all the ids
I need something like

<script>
  let ids = {{.Params.ids}}
  for (...)
  ...

Yes, looks like it casted into array of string as the output of:

{{ printf "%#v" .Params.ids }}

Return:

[]string{"123", "456"}

You can try this:

<script>
  let ids = [{{ delimit .Params.ids "," | safeJS }}];
</script
1 Like

Thank you @pamubay. This solves my problem.
I was wondering if I can just pass down js code from the front matter like this if I don’t need ids somewhere else.

<script>
   {{ .Params.vardeclare | safeJS}}

Is this recommended?
Or is there a better way to pass down params that generate code?

Something like this?

title: My Title
js_string: |
  var ids = [123, 456];
  console.log(ids);
<script>
    {{ .Params.js_string | safeJS }}
</script>

I think it’s okay


Here some examples how Hugo internal template populate inline script from config variable:


More advanced use is using js.Build to pass the data to your js bundle using params options:

1 Like

Thanks, @pamubay. This is really helpful.

Expect everything coming from frontmatter or configuration to be a string and cast it into the type you want to see before using it.