use dict from python in django html template and also in js [duplicate]

Question

I am having a dict statistics in my view.py and give it as param in my context to my index.html. There I want to use it in my html like {{ statistics.key1 }}. But I also want to use it in js.

When using json.dumps like this in my view.py:

"statistics": json.dumps(statistics, cls=DjangoJSONEncoder),

I can use it like this in my js:

var statistics = JSON.parse('{{ statistics | escapejs }}');

But then I can't use it as a dict anymore in my html. Makes sense, as it is now a JSON-String.

But when I just pass it like a dict, I can use it in my html. but

var statistics = '{{ statistics | escapejs }}'

gives me a JSON with single quotes so I can't just parse it.

How can I do both? Still use the dict as normal in my HTML and also parse it to use it in js?

You could pass it to the template twice, under two different names, with one of them being the plain dictionary and one of them being the json string. — John Gordon
– John Gordon, Commented Mar 31, 2024 at 19:20
@JohnGordon yes of course. I thought about this solution too. But I considered it being not very clean. I'd really like to only pass it once. — progNewbie
– progNewbie, Commented Mar 31, 2024 at 19:23
Use json_script instead of escapejs. See this answer: stackoverflow.com/a/65286399 (Note: even the documentation recommends this) — Abdul Aziz Barkat
– Abdul Aziz Barkat, Commented Apr 2, 2024 at 9:41

Malvin Lok · Accepted Answer · 2024-04-02 09:30:04Z

1

How about creating a custom template filter in Django to transform Python objects into JSON?

Example steps:

In your Django app, create a templatetags directory if it does not already exist.
In this directory, create a file called json_filters.py (or any other name you prefer). It will look something like this:

import json
from django import template
from django.core.serializers.json import DjangoJSONEncoder

register = template.Library()

@register.filter(name='to_json')
def to_json(value):
    return json.dumps(value, cls=DjangoJSONEncoder)

load your filter in the template file before using it:

{% load json_filters %}

<script>
var statistics = JSON.parse('{{ statistics | to_json | escapejs }}');
</script>

The to_json filter transforms your Python dictionary into a JSON string. This is then processed by the escapejs filter to ensure any characters that have special meaning in JavaScript are safely escaped.

answered Apr 2, 2024 at 9:30

Malvin Lok

6425 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Malvin Lok Over a year ago

BTW, and you should only pass statistics Obj in view.py "statistics": statistics,

Collectives™ on Stack Overflow

use dict from python in django html template and also in js [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related