Having Issues with handling Python dictionaries in Javascript flask templates

Question

So I am building a web application using flask that can track mutiple vehicles and provide updates. The python script helps gather all the data and puts them in a dictionary.

I am sending this dictionary over to the index.html with the javascript code within the HTML that initializes a map and places markers based on the coordinates received from python.

The issue I am having is this dictionary is not being parsed properly in js and as a result I get no data.

Right now I have the {{truck_dict}} placeholder to hold the dict object from python in the html.

PS. I am not the best at JS so dont judge 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'
                  }
               }]
         };

SAMPLE OUTPUT of the python generated 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]}

Answer 1

Here is the output:

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]);
}

output:

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]

So, you need to log truck_dict, like:

var truck_dict = {{trucks | tojson}};

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

Answer 2

You're trying to index a dictionary.Using truck_dict[I] doesn't work here because your indices are not numbers (not possible in js anyway).

You need to access dictionary elements with their keys (ex. truck_dict['1301'] or truck_dict.1301 ) NOT indexes. If you want to iterate over each key (which you can use to reference the value mapped to that key), use:

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