How to deal with apostrophe when passing dicts from view to template?

Question

I am trying to pass some dictionaries from a view to a javascript in my template.

The data in view.py looks like:

node_result = [{'y': 0.40750126710593004, 'x': 1}, {'y': 1.0, 'x': 0}, {'y': 0.10288900152052712, 'x': 0}]
edge_result = [{'source': {'y': 0.40750126710593004, 'x': 1}, 'target': {'y': 0.40750126710593004, 'x': 1}}]

In my template , I retrieve it this way:

var nodes = {{node_result}};

var links = {{edge_result}};

BUT, When I inspected the javascript using my browser I got this error:

Clearly, there is a problem with the apostrophes, so how can I transfer dictionary?

Note: This works when I copy+paste dictionaries directly in javascript

Answer 1

You need to first convert the dictionaries to JSON:

json.dumps(node_result))

and then in your template you should turn off the auto escape:

{% autoescape off %}
var nodes = {{node_result}};
var links = {{edge_result}};
{% endautoescape %}

You can also do :

var nodes = {{ node_result|safe }};
var links = {{ edge_result|safe }};

Documentation https://docs.djangoproject.com/en/1.8/ref/templates/builtins/