在Javascript模板中处理Python字典时遇到问题

因此，我正在使用flask构建一个web应用程序，它可以跟踪多个车辆并提供更新。python脚本帮助收集所有数据并将它们放入字典中

我将这个字典发送到index.html，其中包含html中的javascript代码，该代码根据从python接收到的坐标初始化地图并放置标记

我遇到的问题是这个字典没有在js中正确解析，因此我没有得到任何数据

现在我有了{truck_dict}}占位符，用于在html中保存python中的dict对象

另外，我在JS方面不是最好的，所以不要评判XD

#Python Code
return render_template('pages/index.html', trucks = truck.driver_locator(truck.locations()))
#Even when I jsonify/json.dump the variable in the trucks object, nothing happens

python生成的dict的示例输出

{'1301': [43.1220307, -78.9352247], '1302': [42.3107737, -77.2519131], '1304': [40.3809016, -74.5665863], '1305': [40.2453049, -74.5707928], '1303': [39.6435448, -75.9325289]}

---

您正在尝试为字典编制索引。在这里使用truck_dict[I]不起作用，因为您的索引不是在js中无论如何都不可能实现的数字

您需要使用字典元素的键访问它们，例如truck_dict['1301']或truck_dict.1301 NOT索引。如果要迭代每个键（可用于引用映射到该键的值），请使用：

for(var key in truck_dict) {
  var value = truck_dict[key];
  // do what you need with value and key here
}

以下是输出：

var truck_dict = {'1301': [43.1220307, -78.9352247], '1302': [42.3107737, -77.2519131], '1304': [40.3809016, -74.5665863], '1305': [40.2453049, -74.5707928], '1303': [39.6435448, -75.9325289]};

for (var i in truck_dict) {
  console.log(i, truck_dict[i]);
}

输出：

1301 [43.1220307, -78.9352247]
1302 [42.3107737, -77.2519131]
1303 [39.6435448, -75.9325289]
1304 [40.3809016, -74.5665863]
1305 [40.2453049, -74.5707928]

所以，你需要记录卡车日志，比如：

var truck_dict = {{trucks | tojson}};

console.log(trucks);
console.log(truck_dict);

---

我们无法看到如何生成字典，或者示例输出是什么。我建议您检查浏览器上的元素，看看您正在运行的javascript模板中实际插入了什么。这些信息将比这些小片段对你和你的帖子更有帮助。编辑问题以反映输出我看到你在说什么。python中也是如此。然而，我认为错误很可能与如何将字典传递给js脚本有关。我实现了您提供的代码，但是没有正确解析键值对。发布呈现模板后生成的js代码的样子谢谢。另一个问题是，Mapbox GL使用了lat lon反向坐标。这与您的答案相结合，解决了这个问题

var truck_dict = {{trucks | tojson}};

console.log(trucks);
console.log(truck_dict);