CODEWITHSUNDEEP
javascriptdjangodjango-templates
Christian
Christian

Reputation: 26387

How to pass an array in Django to a template and use it with JavaScript

I want to pass an Array to a template and afterwards use it via JavaScript.

In my views.py I have:

arry1 = ['Str',500,20]
return render_to_response('test.html', {'array1': arry1})

And in my template:

var array1 = {{ array1 }};

but when I visit the website it outputs:

var array1 = ['Str',500,20];

What do I have to change?

Upvotes: 60

Views: 59132

Answers (6)

Dimitrios Mistriotis
Dimitrios Mistriotis

Reputation: 2788

Not sure when it was added to Django, a candate for the same result is json-script:

{{ value|json_script:"hello-data" }}

If value is the dictionary {'hello': 'world'}, the output will be:

<script id="hello-data" type="application/json">{"hello": "world"}</script>

The resulting data can be accessed in JavaScript like this:

const value = JSON.parse(document.getElementById('hello-data').textContent);

ID, "hello-data" in the case above will be optional on Django versions after 4.0.

Upvotes: 0

Deniz Dogan
Deniz Dogan

Reputation: 26227

Try using {{ array1|safe }} and see if that makes any difference.

Upvotes: 115

Sanat Jha
Sanat Jha

Reputation: 1

Just Try replacing var array1 = {{ array1 }}; with var array1 = '{{ array1|safe }}'; . I dont know why but this worked for me. enter image description here

Upvotes: 0

Bartek
Bartek

Reputation: 624

As mentioned, you could use the |safe filter so Django doesn't sanitize the array and leaves it as is.

Another option, and probably the better one for the long term is to use the simplejson module (it's included with django) to format your Python list into a JSON object in which you can spit back to the Javascript. You can loop through the JSON object just like you would any array really.

from django.utils import simplejson
list = [1,2,3,'String1']
json_list = simplejson.dumps(list)
render_to_response(template_name, {'json_list': json_list})

And in your Javascript, just {{ json_list }}

Upvotes: 19

muak
muak

Reputation: 199

It could be done by django core serializers. All you need to do is to serialize your data in json and than pass it to template.

data = serializers.serialize("json", <list>)
return render(request, 'view.html', {'data':data})

In your template save this list into javascript variable.

var list = {{data|safe}}

Upvotes: 0

Tulio Nobrega
Tulio Nobrega

Reputation: 91

In Django:

from django.utils import simplejson
json_list = simplejson.dumps(YOUR_LIST)

AND PASS "json_list" IN CONTEXT

IN JS:

var YOUR_JS_LIST = {{YOUR_LIST|safe}};

Upvotes: 7

Related Questions