访问模板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

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

Answer 2

您没有使用圆括号{{ }}来注入变量。只要替换这个：

[spot.lat, spot.lng]

与

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

你可以走了。您可以阅读有关模板variables的更多信息。你知道吗

Answer 3

如果要使用相同的代码，请确保在脚本运行之前先完成循环，否则不会呈现循环。还有一件事，用{{点.lat}}和{{现货液化天然气}}. 你错过了花括号…-）