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, Jul 04 '12 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, Jul 04 '12 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, Jul 04 '12 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, Jul 04 '12 at 19:21
@AidasBendoraitis the comma is not a problem here. I have no syntax error, it just doesn't bring what it's inside the {% for %}. I have tested with the comma after the final item, with real items, and it works fine. Thank you! — andresmechali, Jul 04 '12 at 19:22
@andresmechali : then check you context["points"] is what you think it is. Please post the view code... — bruno desthuilliers, Jul 04 '12 at 19:27
@brunodesthuilliers this is my view: def base (request): points = ('-15.4566620,28.07163320','-15.4565908,28.17165390','-15.4574730,28.27194150','-16.4420721,29.06935520','-17.4570137,29.37124410') return render_to_response('base.html', points) and this says in my js: var flightPlanCoordinates = [ {% for point in points %} new google.maps.LatLng({{point}}), {% endfor %} ]; and the URLS: (r'^base/$', base), but still doesn't include the code in the JS. I appreciate your help! — andresmechali, Jul 04 '12 at 19:52
Try `return render_to_response('base.html', { 'points': points })` — Heitor Chang, Jul 04 '12 at 19:54
@HeitorChang now it finally worked!! thank you very mucho to everybody. A little question: appart from having the list 'points', I have a dictionary called 'user_data' that I would also like to include in the context. Do you know how it's done? — andresmechali, Jul 04 '12 at 20:03
@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: https://docs.djangoproject.com/en/dev/ref/templates/builtins/#for — Heitor Chang, Jul 04 '12 at 20:17

score 4 · Accepted Answer · answered Jul 04 '12 at 19:17

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 · Answer 2 · 2012-07-04T19:56:22.840

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 04 '12 at 19:56

answered Jul 04 '12 at 18:43

geocodezip

158,664
13
220
245

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') – andresmechali Jul 04 '12 at 19:18
1

@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). – bruno desthuilliers Jul 04 '12 at 19:24
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 – andresmechali Jul 04 '12 at 19:25

Django FOR LOOP in JavaScript

2 Answers2

Linked