FOR循環通過JS腳本中的Django模型

Question

我剛剛啓動了一個使用Django和HTML/Javascript模板的Web應用程序。

我的Django spot應用程序包含一個發送到HTML模板的Spot模型 - 用於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()}) 

---

由於其他計算器問題（見下表），我也試圖序列化Spot.objects.all()要麼django.core.serializers.serialize("json", Spot.objects.all())或創建我自己的串行器（感謝Django_REST）。問題依然存在。那麼，我用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字段）
• 谷歌地圖API可用於一些（經度，緯度）的元組返回即使被明確定義

Answer 1

由於大括號和百分比之間有空格，因此Django將無法識別這些模板標記。所以，根本沒有循環。你需要將它們寫在正確的格式：

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

一旦你這樣做，你會開始得到各種JS語法錯誤的，因爲你沒有用引號包裹您的任何數據。但是，正如評論所說，把它當做JSON會好很多。

Answer 2

即使是我認爲你的串行數據轉換成JSON是更好的主意錯誤。您的JavaScript代碼不起作用，例如{{ spot.name }}將呈現原始字符串，所以爲了理解它，你需要把它放在引號中（當然每行之後還有分號）。

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