How to: django template pass array and use it in javascript?

Question

Ok so here is a problem, I have an html template which looks something like this:

<script>
    $(function() {
        var vCountries = {{ visitedCountriesList }};
    });
</script>

<..>

{{ visitedCountriesList }}

from server I pass an list to this item, but after rendering it looks like this:

<script>
    $(function() {
            var vCountries = ;
        });
    </script>

    <..>

    [u'Afghanistan', u'Japan', u'United Arab Emirates']

so my question is - why ? and how I can pass it to javascript...?

Bialecki · Accepted Answer · 2011-07-24 13:06:19Z

8

The problem is the string representation of the array isn't valid JavaScript. The u' at the start is no good. This:

[u'Afghanistan', u'Japan', u'United Arab Emirates']

should be this:

['Afghanistan', 'Japan', 'United Arab Emirates']

You have two options. In the view function, encode it as JSON there there:

render_to_response('my_view.html', {
    'visitedCountriesList' : json.dumps(visitedCountriesList)
})

or create a filter that you can use. See this one for an example. Then usage is just:

<script>
  $(function() {
    var vCountries = {{ visitedCountriesList|jsonify }};
  });
</script>

answered Jul 24, 2011 at 13:06

Bialecki

31.3k38 gold badges91 silver badges109 bronze badges

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

Comments

Hassek · Accepted Answer · 2011-07-24 11:16:18Z

1

you should have in your html an id with the variable rendered and look it there, lets do an example:

<...>
    <loldiv id="myvar" data="{{info}}"/>
<...>

and in your javascript:

<script>
$(function() {
    var vCountries = $("#myvar").attr("data");
});
</script>

That is assuming you are using jQuery.

I dont really know why that template assign the variable but you should not render any information on javascript code since there is a moment where you are going to take that js and put it on a compressed file, or move it, or reuse it and it will be really hard to do it if you rendered the variable values that way.

hope this helps!

answered Jul 24, 2011 at 11:16

Hassek

9,0256 gold badges51 silver badges59 bronze badges

3 Comments

Lukas Šalkauskas Over a year ago

ok, and how do you convert from data="[u'Afghanistan', u'Japan', u'United Arab Emirates']" to an array object in js?

Hassek Over a year ago

you should encode the list as a json and decode it in your javascript. from django.utils import simplejson vcountries = simplejson.dumps(vcountries) and send that from your view and decode the variable with a JSON.parse on your javascript

Nick Johnson Over a year ago

There's no need to do this - after json encoding, it can simply be inserted as a string into the Javascript.

Collectives™ on Stack Overflow

How to: django template pass array and use it in javascript?

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related