Reusing the rendered custom output format in template files

support
1

Hello,
New to the forum here but building websites with Hugo since a few years.
And now… I have a question :slight_smile: :

I use JSON as a custom output format for my sections and this works as expected.
Now I want to use this JSON file in my footer template with:

{{ with .OutputFormats.Get "json" }}
    <script>
      {{ $jsonData := getJSON .RelPermalink }}
      {{ if ne $jsonData nil }}
        var geojson = {{ $jsonData }};
      {{ end }}
    </script>
{{ end }}

When I build, I get this error:
ERROR [...] Failed to get JSON resource "/section1/section1-1/index.json": unexpected end of JSON input

I am aware that during the fast build process, Hugo cannot catch up with first creating JSON files then using them to process the pages even further… but is there a workaround or other approach to achieve the same?

Before, I was writing JSON manually and served these files from the data folder and of course this was always working as the JSON files were always there. Custom JSON output is an enormous breakthrough for me but I would like to use it to feed my own pages.

Thanks in advance &
keep up the fantastic work!

2

Hi there. Am curious if rewriting it as below would make a difference

{{ with (getJSON .RelPermalink) }}
  var geojson = {{ . }};
{{ end }}
3

This is currently not possible.

Note that the Output Format implementation (and much much more) will be wastly improved in the next version of Hugo (details will come in not so long, but it will be great), but it will still not be possible to access another output format’s .Content (you can link to it). I have written a note in the code to maybe enable this in the future, but I had to draw a line somewhere or I would never get it done …

1 Like
4

Thank your for your swift replies, @zwbetz @bep !
I think to work around this case by directly building my javascript object in JSON syntax and skipping the getJSON step. For this, I’ll try out a custom javascript output. Another option perhaps is to just fetch the JSON stream in javascript and work from there.

I’ll let you know how it turns out.

5

Argh. Well here I am again.
This is what I have:

{{ with .OutputFormats.Get "json" }}
  <script>
  {{ with $jsonData := .RelPermalink | safeJS }}
    {{ if ne $jsonData nil }}
      var geojson = JSON.parse('{{ . }}');
    {{ end }}
  {{ end }}
  </script>
{{ end }}

And this gives me:

<script>
  var geojson = JSON.parse('\/section-1\/section-1-1\/index.json');
</script>

Which won’t run because of the escaped slashes.
I tried safeHTML, safeJS, plainify, … None of them give me a nice URL to parse.
Do I overlook something?

Thanks for your time & help!

6

No need for the single quotes. Try it like this

{{ with .OutputFormats.Get "json" }}
  {{ with .RelPermalink }}
  <script>
    var geojson = JSON.parse({{ . }});
  </script>
  {{ end }}
{{ end }}

Which should give

<script>
  var geojson = JSON.parse("/section-1/section-1-1/index.json");
</script>
7

Thanks @zwbetz! Works!