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.
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>
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>
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);
have you tried passing something like json.dumps(time_series) to the render function?
Related
I am building a Python/Flask based web app. The python script produces a dictionary of words and their corresponding weights. I have a javascript file (let's call it custom.js), which I call from the output.html. The way this javascript works is that it takes this dictionary and then uses d3.v3.min.js and d3.layout.cloud.js to create a wordcloud. When the dictionary is hard-coded into custom.js, the output file shows the wordcloud. However, the dictionary values will change depending on other parameters in the python script. Therefore, I would like to pass this dictionary from Python to custom.js. I am not sure how to do that.
I know that the parameters could be passed to HTML using {{ params |safe }}, but I am trying to figure out how to do that so that custom.js will receive the parameters (dictionary of words and weights, in this case) and word clouds can be rendered dynamically.
Thank you in advance!
If I understood you correctly you need to create a view function (a route) in the flask backend with url like this /get_dictionary. This function can look like this:
from flask import request, jsonify
...
#app.route('/get_dictionary'):
def get_dictionary():
...
your_dictionary = []
# Fill in your_dictionary with data
...
render_template('your_template.html', your_dictionary=your_dictionary)
EDIT:
You can pass the data from flask to script section of the html template using standard jinja2 notation:
<html>
<head>
<script>
your_dictionary = {{ your_dictionary | tojson }}
<!-- Do what you need with your_dictionary -->
</script>
...
</head>
...
you can try define a var in your template html, like this:
<script>
var your_var = '{{ value }}'
</script>
then use "your_var" in external js file. But please make sure above definition is at ahead of your js file refer.
I'm attempting to get a JSON file into a script. I can't seem to be able to get it there by serving it from the filesystem so I made a view that returns the JSON data to the page like so:
def graph(request, d): #d.data is the file in the database
data = json.load(d.data)
return render(request, 'temp/template.html', {'json': data})
In my JS:
var j = {{ json|safe }};
When I look at the source for the JS it shows the data in this format:
{u'people': [{u'name': u'steve'}, {u'name': u'dave'}]}
Which I read shouldn't be a problem. I don't have any variables called 'id' and yet I get the error in the title pointing to the provided line of JS.
Why could this be? Also how do I then use the objects from the JSON in my script?
Solved by using simplejson:
import simplejson as json
And everything else as above. This is because the built in json.dumps returns an array of unicode like:
{u'people': [{u'name': u'steve'}, {u'name': u'dave'}]}
When using simplejson that shouldn't be a problem.
I have been able to pass primitive types such as integers like this, but I would like to pass more complicated objects, such as some the Django models that I have created. What is the correct way of doing this?
I know I'm a little late to the party but I've stumbled upon this question in my own work.
This is the code that worked for me.
This is in my views.py file.
from django.shortcuts import render
from django.http import HttpResponse
from .models import Model
#This is the django module which allows the Django object to become JSON
from django.core import serializers
# Create your views here.
def posts_home(request):
json_data = serializers.serialize("json",Model.objects.all())
context = {
"json" : json_data,
}
return render(request, "HTMLPage.html",context)
Then when I'm accessing the data in my html file it looks like this:
<script type = 'text/javascript'>
var data = {{json|safe}}
data[0]["fields"].ATTRIBUTE
</script>
data is a list of JSON objects so I'm accessing the first one so that's why it's data[0]. Each JSON object has three properties: “pk”, “model” and “fields”. The "fields" attribute are the fields from your database. This information is found here: https://docs.djangoproject.com/es/1.9/topics/serialization/#serialization-formats-json
For Django model instances in particular, you can serialize them into JSON and use the serialized value in your template context.
From there, you can simply do:
var myObject = eval('(' + '{{ serialized_model_instance }}' + ')');
or
var myObject = JSON.parse('{{ serialized_model_instance }}');
if using JSON-js (which is safer).
For Python objects in general see How to make a class JSON serializable
How do you safely render JSON data in a django webapp?
On the server in django I generate JSON data and then render that JSON data in a django template. The JSON occasionally contains snippets of html. Most of the time, that's fine, however if the </script> tag is inside the JSON data when it is rendered, it destroys the surrounding javascript.
For example...
On the server, in python I'll have this:
template_data = {
'my_json' : '[{"my_snippet": "<b>Happy HTML</b>"}]'
}
# pass the template data to the django template
return render_to_response('my_template.html', template_data, context_instance = c)
And then in the template:
<script type="text/javascript">
var the_json = {{my_json|safe}};
</script>
... some html ...
The resulting html works fine and looks like this:
<script type="text/javascript">
var the_json = [{"my_snippet": "<b>Happy HTML</b>"}];
</script>
... some html ...
However, you run into problems when, on the server, the JSON looks like this:
template_data = {
'my_json' : '[{"my_snippet": "Bad HTML</script>"}]'
}
return render_to_response('my_template.html', template_data, context_instance = c)
Now, when it's rendered, you'll get:
<script type="text/javascript">
var the_json = [{"my_snippet": "Bad HTML</script>"}];
</script>
... some html ...
The closing script tag within the JSON code is treated as closing the entire script block. All of your javascript will then break.
One possible solution is to check for </script> when passing the template data to the template, but I feel like there is a better way.
Safely insert the JSON as a string, and then call JSON.parse on it
Use escapejs instead of safe. It is designed for outputting to JavaScript.
var the_json = '{{my_json|escapejs}}';
To get a JavaScript object you then need to call JSON.parse on that string. This is always preferable than dumping a JSON-encoding into your script and evaluating it directly, for security reasons.
A useful filter to get python objects directly to the client that I use is this:
#register.filter
def to_js(value):
"""
To use a python variable in JS, we call json.dumps to serialize as JSON server-side and reconstruct using
JSON.parse. The serialized string must be escaped appropriately before dumping into the client-side code.
"""
# separators is passed to remove whitespace in output
return mark_safe('JSON.parse("%s")' % escapejs(json.dumps(value, separators=(',', ':'))))
And use it like:
var Settings = {{ js_settings|to_js }};
I have a bunch of unicode strings in my data which I need to pass from my django view to template for using in a JavaScript scriptlet that passes it to the web back and forth.
The problem is I want the strings to be represented in the JavaScript unicode form but I get strings with a u prefix from python.
For example, for the string mężczyźni, Python stores it as u'm\u0119\u017cczy\u017ani' but when it is passed to the template, it does not remove the u prefix which creates problems for JavaScript while processing it. I want it to be simply 'm\u0119\u017cczy\u017ani' so that the JavaScript code in the template can use it.
I tried using urqluote, smart_unicode, force_unicode but couldn't hit a solution or even a hack.
What do I do ?
Edit: Django 1.7+ no longer includes simplejson. Instead of
from django.utils import simplejson
write
import json
and then use json instead of simplejson.
You are probably printing the python repr of your data dict, and trying to parse it in javascript:
{{ your_python_data }}
Instead, you could export your data in json:
from django.utils import simplejson
json_data_string = simplejson.dumps(your_data)
And load the data directly in javascript:
var your_data = {{ json_data_string }};
You could also make a template filter:
from django.utils import simplejson
from django import template
from django.utils.safestring import mark_safe
register = template.Library()
#register.filter
def as_json(data):
return mark_safe(simplejson.dumps(data))
And in your template:
{% load your_template_tags %}
{{ your_python_data|as_json }}
Note that you should be careful with XSS, if some of "data" comes from user input, then you should sanitize it.