FOR loop over a Django model in a JS script

Question

I just started a web app using Django and HTML/Javascript templates.

My Django spot app contains a Spot model that is sent to a HTML template - to be used with the Google Map Api. I've encountered a problem when looping over the variable spots containing Spot.objects.all(). It seems the problem comes from the way I send the data to the HMTL file.

----------------------------------------- Spot Django-app : models.py --------------------------------------------

class Spot(models.Model):
     idn = models.IntegerField(unique = True)
     name = models.CharField(max_length = 200)
     longitude = models.FloatField()
     latitude = models.FloatField()

------------------------------------------------- HTML / JS -----------------------------------------------

<script type="text/javascript">
   var IDs = []
   var names = []
   var lat = []
   var lng = []

   { % for spot in spots % }
      IDS.push( {{spot.idn}} );       
      names.push( {{spot.name}} );
      lat.push( {{spot.latitude}} );
      lng.push( {{spot.longitude}} );
   { % endfor % }

Then, the lists do not contain any data that can be used afterwards. Worse, the HTML file does not work if the names.push( {{spot.name}} ) is un-commented.

----------------------------------------- Spot Django-app : views.py --------------------------------------------

from spots.models import Spot
def index(request):
   return render(request, 'index.html', {'spots':Spot.objects.all()})

Thanks to the other stackoverflow questions (listed below), I also tried to serialize the Spot.objects.all() either with django.core.serializers.serialize("json", Spot.objects.all() ) or by creating my own serializer (thanks to Django_REST). The problem remains the same. So is the problem in the way I parse my data with JS?

I've look the following link :

with no success. So if the answer is included or related to these topics, would you mind explaining me something I've been working around for days ...

EDIT: The problem was plural:

Serializing the data (or not ; I did not for now but everyone who answered agreed to say that it's better to)
Adding the quotes from {{ spot.name }} to '{{ spot.name }}', only to non Integer/Float models (i.e. only the models.CharFields fields)
Google Maps Api may return errors for some (longitude, latitude) tuples even if they are well-defined

You need to better describe what you mean by "the lists do not contain any data that can be used afterwards". What exactly do you get? You can add a console.log to see what you are getting from the loop — dkarchmer
– dkarchmer, Commented Nov 2, 2015 at 22:05

Daniel Roseman · Accepted Answer · 2015-11-02 22:18:31Z

2

Django will not recognize those template tags because you have spaces between the brace and the percent. So, there is no looping being done at all. You need to write them in the correct format:

{% for spot in spots %}
   ...
{% endfor %}

Once you do that, you'll start getting all sorts of JS syntax errors because you have not wrapped any of your data in quotes. But, as the comments say, doing this as JSON would be much better.

answered Nov 2, 2015 at 22:18

Daniel Roseman

602k68 gold badges910 silver badges923 bronze badges

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

1 Comment

Igor OA Over a year ago

Thank you. Actually, my code does not include these spaces - I added them thinking it would be clearer. And adding the missing quotes to {{ spot.name }} didn't help either. What would be the way to do it with serialization?

beezz · Accepted Answer · 2015-11-02 22:04:40Z

1

Even that I think that serializing your data into Json is much better idea. Your javascript code does not work because e.g. {{ spot.name }} will render raw string so for javascript to understand it you need to put it in quotes (and of course semicolon after each line).

names.push('{{spot.name}}');

answered Nov 2, 2015 at 22:04

beezz

2,44820 silver badges15 bronze badges

2 Comments

Igor OA Over a year ago

As I mentionned it in my edit, it worked by doing it only with the models.CharField field, not the models.IntegerField and models.FloatField (spot.idn,spot.latitude,spot.longitude). Is it "normal', I mean should I force my float and interger values to be strings when read and then turn them into float with JS functions?

beezz Over a year ago

The point here is that in template, Django is rendering values so you are losing types. For example by using USE_THOUSAND_SEPARATOR you may get float numbers in format not recognized by javasacript functions. etc. therefore it's better to serialize it to json, because json is javascript's format. JSON = javascript object notation

Collectives™ on Stack Overflow

FOR loop over a Django model in a JS script

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related