Front matter using yaml get the type wrong

support
1

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 (...)
  ...
2

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
3

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?

4

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
5

Thanks, @pamubay. This is really helpful.

6

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