CODEWITHSUNDEEP
javascriptjsondjangodjango-1.7cal-heatmap
jkarimi
jkarimi

Reputation: 1267

Django: passing JSON from view to template

In views.py, I have time series data stored in a dictionary as follows:

time_series = {"timestamp1": occurrences, "timestamp2": occurrences}

where each timestamp is in unix time and occurrences is an integer.

Is there a way to pass the time series data as a json object in the context of the render function?

Why do this: I am using Cal-heatmap on the front end which requires the data to be in json format. Ajax requests work just fine for now but I ideally would like to use the render approach if possible.

Upvotes: 16

Views: 41521

Answers (4)

talz
talz

Reputation: 1200

Using the Django templates built-in filter json_script:

In views.py:

render(request, "foo.html", {'time_series_data': time_series})

In the template foo.html:

{{ time_series_data|json_script:"time-series-data" }}

In your script:

const timeSeriesData = JSON.parse(document.getElementById('time-series-data').textContent);

Upvotes: 5

Milan Cermak
Milan Cermak

Reputation: 8064

Pass a json.dumps value to the template. It is already a valid JSON string so you don't need to parse it or anything. Only when rendering it in the template, mark it as safe to prevent HTML quoting.

# views.py
def foo(request):
    time_series_json = json.dumps(time_series)
    return render(request, 
                  "template.html", 
                  context={'time_series': time_series_json})

# in the template
<script>
    const timeSeries = {{ time_series | safe }};
</script>

Upvotes: 8

Yuji &#39;Tomita&#39; Tomita
Yuji &#39;Tomita&#39; Tomita

Reputation: 118448

If a frontend library needs a to parse JSON, you can use the json library to convert a python dict to a JSON valid string. Use the escapejs filter 

import json

def foo(request):
    json_string = json.dumps(<time_series>)
    render(request, "foo.html", {'time_series_json_string': json_string})


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

Upvotes: 50

Romeo Mihalcea
Romeo Mihalcea

Reputation: 10252

have you tried passing something like json.dumps(time_series) to the render function?

Upvotes: 2

Related Questions