How to use Django list as a javascript variable in Django template?

Question

I have a Django list by named list_a:

[['Host Name', 'No. of Events'], [u'12.23.21.23', 0], [u'2.152.0.2', 2]]

I am using Google Chart API in my Django template. I have to paas list_a to the following java script variable:

var data = google.visualization.arrayToDataTable([
    ['Host_name', 'No of events'], 
    ['12.23.21.23', 0], 
    ['2.152.0.2', 2]
    ]);

The above one is hard coded, but i want to use in the following way:

var data = google.visualization.arrayToDataTable({{list_a}});

I tried with the above code and checked with the javascript console option provided in chrome. It show this:

 var data = google.visualization.arrayToDataTable([[&#39;Host Name&#39;, &#39;No. of Events&#39;], [u&#39;12.23.21.23&#39;, 0], [u&#39;2.152.0.2&#39;, 2]]);

I compared with this above line with the hard coded code, It is very different because of following way:

&#39;
['12.23.21.23', 0]  See the quotes on ip address field but not to the next field

How should i make the list_a equivalent to the hard coded, So that i can easily get the required chart.

Apart from that why this &#39 is occurring when i tried to use it directly

I am using this https://google-developers.appspot.com/chart/interactive/docs/gallery/combochart sample of Google charts

Ignacio Vazquez-Abrams · Accepted Answer · 2012-07-23 20:46:37Z

4

Encode it as JSON, mark it safe, and print it out.

var data = google.visualization.arrayToDataTable({{ list_a|json|safe }})

Unfortunately you'll need to write or find the json filter, or encode it as JSON in the view.

answered Jul 23, 2012 at 20:46

Ignacio Vazquez-Abrams

804k160 gold badges1.4k silver badges1.4k bronze badges

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

1 Comment

Ignacio Vazquez-Abrams Over a year ago

@Hamish: A "u" in front of a string is not valid JavaScript.

Collectives™ on Stack Overflow

How to use Django list as a javascript variable in Django template?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related