Django FOR LOOP in JavaScript - Stack Overflow

admin管理员组

文章数量:1357398

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.

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.

• javascript
• django
• google-maps

Share Improve this question Follow edited Jul 4, 2012 at 18:18 Esailija 140k2323 gold badges279279 silver badges328328 bronze badges asked Jul 4, 2012 at 18:16 andresmechaliandresmechali 71522 gold badges77 silver badges1818 bronze badges 10

• What error do you get? It might be that the ma after the last item in the list throws a syntax error. – Aidas Bendoraitis Commented Jul 4, 2012 at 18:28
• @AidasBendoraitis : the ma 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 Commented Jul 4, 2012 at 18:38
• 1 @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 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 Commented Jul 4, 2012 at 19:21
• 1 @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./en/dev/ref/templates/builtins/#for – Heitor Chang Commented Jul 4, 2012 at 20:17

 |  Show 5 more ments

2 Answers 2

Sorted by: Reset to default 4

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 ma, 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 %}
    ]
})

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 ma
   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])));
}

本文标签： Django FOR LOOP in JavaScriptStack Overflow