在模板javascript中访问Django "context"(在地图上创建标记)

Question

我正在尝试在JavaScript中迭代字典列表。 该列表来自渲染上下文，称为"斑点"。如果我打印"斑点"，这就是我看到的：

[{u'rider_ability': u'Intermediate, Expert', u'spot_distance': 0, u'water_type': u'Shallow, Flat, Chop, Small wave', u'water_quality': u'Clean', u'lat': 40.6775, u'lng': 14.7587, u'spot_name': u'Salerno'}, {u'rider_ability': u'Expert', u'spot_distance': 7, u'water_type': u'Flat, Chop, Small wave', u'water_quality': u'Clean', u'lat': 40.6436, u'lng': 14.6984, u'spot_name': u'Cetara'}, {u'rider_ability': u'Intermediate, Expert', u'spot_distance': 16, u'water_type': u'Chop, Small wave', u'water_quality': u'Crystal clear', u'lat': 40.6262, u'lng': 14.5883, u'spot_name': u'Spiaggia Duoglie'}, {u'rider_ability': u'Beginner, Intermediate, Expert', u'spot_distance': 33, u'water_type': u'Shallow, Chop, Small wave', u'water_quality': u'Clean', u'lat': 40.4271, u'lng': 14.9818, u'spot_name': u'Ponte di Ferro'}, {u'rider_ability': u'Beginner, Intermediate, Expert', u'spot_distance': 36, u'water_type': u'Shallow, Chop, Small wave', u'water_quality': u'Clean', u'lat': 40.4026, u'lng': 14.9949, u'spot_name': u'Paestum'}, {u'rider_ability': u'Beginner, Intermediate, Expert', u'spot_distance': 41, u'water_type': u'Shallow, Flat, Chop, Small wave', u'water_quality': u'Clean', u'lat': 40.343, u'lng': 14.9717, u'spot_name': u'Agropoli'}] 

这是我尝试使用的代码(没有任何结果，我看到一个空地图(。

<script>
const options = {
key: 'MYKEY',
verbose: true,
}
windyInit(options, windyAPI => {
const {
map
} = windyAPI
{% for spot in spots %}
L.marker([spot.lat, spot.lng]).bindPopup(spot.spot_name).addTo(map)
{% endfor %}
})
</script>

关于如何做的任何想法？非常感谢。

Answer 1

您没有使用大括号{{ }}注入变量。只需替换它：

[spot.lat, spot.lng]

跟

[{{ spot.lat }}, {{ spot.lng }}]

你很好去。您可以阅读有关模板变量的更多信息。

Answer 2

尝试在javascript中使用xhr并将数据转换为json并使用HttpResponse((

Answer 3

如果要使用相同的代码，请确保循环在脚本运行之前首先完成，否则将不会呈现。 还有一件事将其替换为 {{ spot.lat }} 和 {{ spot.lng }}。 你错过了大括号..：-(