Question

因此，我正在使用flask来构建Web应用程序，该烧瓶可以跟踪多种车辆并提供更新。 python脚本有助于收集所有数据并将其放入字典中。

我将此字典与HTML中的javascript代码一起发送到index.html，该代码初始化地图并根据从python接收到的坐标放置标记。

我遇到的问题是该字典在js中无法正确解析，结果我没有数据。

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

PS。我不是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

#JS Code
var truck_dict = {{trucks | tojson}}
var i;
for (var key in truck_dict){
var value = truck_dict[key];
var geojson = {
      type: 'FeatureCollection',
      features: [{
            type: 'Feature',
            geometry: {
            type: 'Point',
            coordinates: value
         },
            properties: {
                  title: 'Mapbox',
                  description: '1303'
                  }
               }]
         };

python生成的字典的样本输出

{'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]}

Answer 1

以下是输出：

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]

因此，您需要登录truck_dict，例如：

var truck_dict = {{trucks | tojson}};

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

Answer 2

您正在尝试为字典建立索引。在这里使用truck_dict[I]无效，因为您的索引不是数字（无论如何在js中都是不可能的）。

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

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

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

2 个答案: