Pretty Print Raw MiniJinja JSON Data On A Template

I use MiniJinja^mj^^ to create the templates for my site. The output data comes in from Serde^se^^ in a JSON like syntax. I use this snippet to pretty print it so it's easier to work with:

Code
<input type="hidden" id="neo_string" value="{{ page }}" />
    <pre id="neo_formatted"></pre>
    <script>
      const updateIt = () => {
        neo_formatted.innerText = JSON.stringify(
          JSON.parse(neo_string.value.replaceAll('None', `"None"`)),
          null,
          2
        )
      }
      document.addEventListener('DOMContentLoaded', updateIt)
    </script>
Notes

  • This goes in a template that receives data in a `page`` context variable

  • The data is placed in a hidden input element to start with then scrubbed and output in the `pre`` tag when the page is loaded

  • I have optional values that come across in the origial data as `None`` without quotes. The script adds the qutoes to diminish parsing issues

Reference

Reference

Reference

Reference