FOR 循环在 JS 脚本中的 Django 模型

Question

我刚刚使用 Django 和 HTML/Javascript 模板启动了一个网络应用程序。

我的 Django spot 应用程序包含一个 Spot 模型，该模型被发送到 HTML 模板 - 与 Google Map Api 一起使用。我在循环包含Spot.objects.all() 的变量spots 时遇到了问题。 看来问题出在我将数据发送到 HMTL 文件的方式上。

---

------------------------------ 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 % }

然后，列表不包含任何以后可以使用的数据。更糟糕的是，如果 names.push( {{spot.name}} ) 未注释，则 HTML 文件将不起作用。

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

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

---

感谢其他 stackoverflow 问题（如下所列），我还尝试使用 django.core.serializers.serialize("json", Spot.objects.all() ) 或创建自己的序列化程序（感谢 Django_REST）序列化 Spot.objects.all()。问题仍然相同。那么我用 JS 解析数据的方式有问题吗？

我查看了以下链接：

• Returning JSON array from a Django view to a template
• django for loop in a .html template page (newbie)
• Django FOR LOOP in JavaScript

没有成功。因此，如果答案包含这些主题或与这些主题相关，您介意向我解释一下我几天来一直在解决的问题吗...

编辑： 问题是复数：

• 序列化数据（或者不序列化数据；我暂时没有，但回答的每个人都同意说最好这样做）
• 将{{ spot.name }} 的引号添加到'{{ spot.name }}'，仅适用于非整数/浮点模型（即仅models.CharFields 字段）
• Google Maps Api 可能会为某些（经度、纬度）元组返回错误，即使它们定义明确

Answer 1

即使我认为将您的数据序列化为 Json 是更好的主意。您的 javascript 代码不起作用，因为例如{{ spot.name }} 将呈现原始字符串，因此要让 javascript 理解它，您需要将其放在引号中（当然每行后面还要加上分号）。

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

Answer 2

Django 将无法识别这些模板标签，因为大括号和百分号之间有空格。因此，根本没有进行循环。您需要以正确的格式编写它们：

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

一旦你这样做了，你就会开始遇到各种 JS 语法错误，因为你没有将任何数据用引号括起来。但是，正如 cmets 所说，以 JSON 格式执行此操作会更好。