Quote encoding inside JSON tag

support
1

Hi folks,
I have recently discovered Hugo via markdowntempates and love the potential to use Hugo as a way to share reports and dynamic charts that I build in R. The HTML snippet that is generated for the chart pretty much always has the same format like this:

<div id="htmlwidget-3967" style="width:100%;height:auto;" class="datatables"></div>
<script type="application/json" data-for="htmlwidget-3967">{"x":{"data":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42]}}</script>

The div tag renders fine when Hugo processes the md file to HTML, but not the script tag. The double quotes end up as {&ldquo;x&rdquo;:{&ldquo;data&rdquo;: in the HTML, thereby breaking the chart rendering.

I have been able to save the code into a separate JSON file and use {{ $dataJ := getJSON "url" }} but am wondering if there is a way to print the script tag directly to a page.

If you can point me in the right direction, I appreciate it!

Michael

2

I haven’t tested the HTML you posted, but would a shortcode work for the HTML at least?

I’m not sure about the data, but I’m also really new to Hugo, so don’t pay attention to anything I say.

3

Thanks Thad. So my approach is like this right now:

{{< chart name="htmlwidget-3967" url="data/htmlwidget-3967.json" >}}

with the shortcode file chart.html looking like this:

{{ with .Get "url" }}
    {{ $url := . }}
    {{ with $.Get "name" }}
        {{ $name := . }}
       <div id="{{ $name }}" style="width:100% px;height:auto;" class="datatables"></div>
       <script type="application/json" data-for="{{ $name }}">{{ $data := getJSON $url }}{{ $data }}</script>
    {{ end }}
{{ end }}

Maybe that is still the most elegant approach, but it does require that I save two source files, the md and JSON file. Is this what you were suggesting?

Best,
Michael

4

That’s exactly what I was thinking and what I was messing around with. Again, I’m just a moron around here (post #2!), there might be a way, way better way to do this. Wait for someone else to chime in.

The downsides in your case seem to be saving the two files and the fact that the HTTP request isn’t cheap/fast. The possible upside might be that you could use data endpoints that update so your chart could have ‘dynamic upon refresh’ ability. Again, I haven’t tried any of that, just thinking.

- TCB