Django FOR LOOP in JavaScript

Question

First of all, I am a newbie at programming. I am trying to make a web page where you have a Google Map embedded, and in this Map you can see a colored line that sets a path. For this, I am using Django. In my views.py I have a variable called points, where I have some coordinates written in a list, as a string. For example,

points = ('-15.4566620,28.07163320','15.7566620,29.07163320',....)

Then, in the google maps script, I have:

var flightPlanCoordinates = [

        new google.maps.LatLng(-15.4566620,28.07163320),
        new google.maps.LatLng(-15.7566620,29.07163320),

                ];

So when I display my page, I see a line between those points.

I would like to have, instead of that, something like:

var flightPlanCoordinates = [

                   {% for point in points %}

                         new google.maps.LatLng({{point}}),

                   {% endfor %}

                ];

But this doesn't work.

What am I doing wrong, and how should it be?

Thank you very much.

What error do you get? It might be that the comma after the last item in the list throws a syntax error. — Aidas Bendoraitis
– Aidas Bendoraitis, Commented Jul 4, 2012 at 18:28
@AidasBendoraitis : the comma after the last item might break the javascript code or not (depending on the browser/javascript engine) - haven't done front-end for a long time now so I don't remember if this is valid or not - but it looks like there already was one in the "static" version of the code. — bruno desthuilliers
– bruno desthuilliers, Commented Jul 4, 2012 at 18:38
@andresmechali : "this doesn't work" is possibly one of the worst description of a problem. First point: check the generated javascript/html - what does it looks like ?. Second point: use your browser's javascript debugging tools (builtin in Chrome, firebug plugin in Firefox etc) and check for js errors. — bruno desthuilliers
– bruno desthuilliers, Commented Jul 4, 2012 at 18:42
@brunodesthuilliers you are right. with 'this doesnt work' I mean that the script doesn't generate the lines that I wanted to. Where I should have the new lines, taken from the python list, I have nothing. So the page works fine, it brings up the map, but without the points. — andresmechali
– andresmechali, Commented Jul 4, 2012 at 19:21
@andresmechali I just started playing with Django yesterday so I don't have a very good answer for your dictionary. What I tried was sending the mydict variable to the template the same way, inside render_to_response { 'points': points, 'mydict': mydict }, and to access the value in the template, use dot notation {{ mydict.mykey }}. See this page for iterating the dictionary, the key-value part: docs.djangoproject.com/en/dev/ref/templates/builtins/#for — Heitor Chang
– Heitor Chang, Commented Jul 4, 2012 at 20:17

Heitor Chang · Accepted Answer · 2012-07-04 19:17:16Z

The objective is to get the template to render the path array the same as if it were hardcoded. You should check the rendered webpage's source code to be sure.

It's best to remove that trailing comma, even if it does work with it. You can use the forloop.last to omit it in the last point.

I'm following a style as in the polls tutorial. Make sure the view is sending the points variable to the template:

urls.py

urlpatterns contains url(r'^map/$', 'polls.views.map'),

views.py

def map(request):
    points = ('0,0', '10,0', '10,10', '0,10')
    return render_to_response('polls/map.html', { 'points': points })

template map.html

...
var mypolyline = new google.maps.Polyline({
    map: map,
    path: [
      {% for point in points %}
        new google.maps.LatLng({{ point }}) {% if not forloop.last %},{% endif %}
      {% endfor %}
    ]
})

geocodezip · Accepted Answer · 2012-07-04 19:56:22Z

0

Your points array is an array of strings of the form '-15.4566620,28.07163320'. So you are doing this: new google.maps.LatLng({{'-15.4566620,28.07163320'}}),

The google.maps.LatLng constructor takes two numbers, so you need to parse the numbers out of that string (or pass in numbers to the LatLng constructor).

Edit: One way to do it would be to populate the array like this (not tested):

var polylineArray = [];
for (var i = 0; i < points.length; i++)
{
   // split the string at the comma
   var coords = points[i].split(",");
   // change the two strings to floating point numbers, use them to create the LatLng
   polylineArray.push(new google.maps.LatLng(parseFloat(coords[0]),
                                             parseFloat(coords[1])));
}

edited Jul 4, 2012 at 19:56

answered Jul 4, 2012 at 18:43

geocodezip

162k14 gold badges228 silver badges256 bronze badges

3 Comments

andresmechali Over a year ago

Sorry, I don't understand. Where do I have to put that? I have put the curly braces around a coordinate and django throws a syntax error ( Could not parse the remainder: ',28.07230880' from '-15.4569588,28.07230880')

bruno desthuilliers Over a year ago

@geocodezip : it's a Django template, so the {{ somenamehere }} is replaced by the string representation of the "somenamehere" context variable. IOW: this should result in the desired output (remeber we are generating javascript source code here).

andresmechali Over a year ago

Oh, now I undestand what you mean.. but I don't know how to do it. Any idea or recommendation? Should I have 2 lists, one for the longitude and one for the latitue? Thank you

Collectives™ on Stack Overflow

Django FOR LOOP in JavaScript

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related