accessing a python dictionary in javascript

Question

I need to access a dictionary (country_stat) within javascript in a django template. I'm using google charts api that have this javascript code. The below code runs great and prints a neat map. But the values are static.

function drawRegionsMap() {
  var data = google.visualization.arrayToDataTable([
    ['Country', 'Popularity'],
    ['Germany', 2],
    ['United States', 3],
    ['Brazil', 4],
    ['Canada', 5],
    ['France', 6],
    ['RU', 7]
  ]);

Printing country_stat within content block is successful.

{% for key, value in country_stat.items %}
{{key}}, {{value}}
{% endfor %}

prints,

India, 2 Russia, 1

But I don't know how to plug this into the javascript code.

have you considered using django to send you data as json? That way, you don't have to worry about templating you js code — Jibi Abraham
– Jibi Abraham, Commented May 12, 2012 at 10:50

spectras · Accepted Answer · 2015-06-26 17:48:12Z

6

Either ask for the data by AJAX, or plop down literal JSON inside your JavaScript from the template - set a context variable in your view:

import simplejson as json
context['thingy_json'] = json.dumps(thingy)

Then include that variable in your template:

<script>
    var data = {{ thingy_json }};
</script>

edited Jun 26, 2015 at 17:48

spectras

13.6k2 gold badges34 silver badges54 bronze badges

answered May 12, 2012 at 10:54

Amadan

200k23 gold badges252 silver badges321 bronze badges

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

Comments

John Eipe · Accepted Answer · 2012-05-12 11:00:20Z

3

Actually solved it.

  var data = google.visualization.arrayToDataTable([
    ['Country', 'Popularity'],
    {% for key, value in country_stat.items %}
    ['{{key}}', {{value}}],
    {% endfor %}
  ]);

The problem was silly - i missed the single quotes around {{key}}

answered May 12, 2012 at 11:00

John Eipe

11.4k24 gold badges77 silver badges121 bronze badges

2 Comments

dm03514 Over a year ago

You shouldn't have to build the array in javascript just pass JSON from django to javascript.

spectras Over a year ago

While it may work for your specific dataset, you don't want to do this. Any single quote in the data will break your application. And antislashes will induce odd behaviors. See Amadan's answer for how to do this cleanly and with much less effort.

Collectives™ on Stack Overflow

accessing a python dictionary in javascript

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related