How do I use the map[] syntax in HTML data-* attributes?

support
1

I have a partial that looks like this:

<canvas id="chart" data-chart-data="{{ .data }}"></canvas>

This renders as follows:

<canvas id="chart" data-chart-data="map[data:map[datasets:[map[axis:X backgroundColor:[#00568a #042b48 #7a9d4a] data:[36 39 25] label:$1.3M type:doughnut]] labels:[Donations Grants Savings]] options:map[plugins:map[datalabels:map[formatter:value => value + '%']]] type:doughnut]"></canvas>

I’m having a really hard time finding documentation for the map[] syntax Hugo is using inside the data-* attribute. Particularly, how I might deserialize it in my frontend JavaScript. Alternatively, maybe I can run it through a pipe to spit out standard JSON instead of this map[] syntax?

Can anyone help point me in the right direction? Thanks.

2

See the jsonify function in the documentation.

1 Like
3

This solves my problem, thank you!

However I’d still love to know more about the map[] syntax and how it can be used.

4

See Introduction to templating | Hugo