如何在 Javascript 中遍历来自 Flask 的列表？

Question

我正在尝试将来自 Flask 的数据库中的列表传递到 Javascript 中以制作 Google Maps api 标记。 例如，我从 Flask 向 home.html 传递汽车列表及其经度和纬度。然后我想遍历这个列表，为每个位置创建一个谷歌地图标记并将其放在地图上。

function placeCars() {
        {% for cars in car_locations %}
        var position = {
            lat: cars.Location.Latitude,
            lng: cars.Location.Longitude
        };
        new google.maps.Marker({
        position: position,
        map: map
      });
        {% endfor %}
    }

Answer 1

使用这个

{{cars.Location.longitude}}

你应该把它包裹在{{ }}

Answer 2

我认为你遇到的问题是烧瓶会在 html 中创建一个函数，如下所示：

function placeCars() {
  var position = {
      lat: 123,
      lng: 456
  };
  new google.maps.Marker({
      position: position,
      map: map
  });
  var position = {
      lat: 789,
      lng: 123
  };
  new google.maps.Marker({
      position: position,
      map: map
  });
}

那么你将需要另一段 javascript 来执行该函数调用

尝试将您的 javascript 更改为类似的内容

  // Load the data from Flask
  var carLocations = JSON.parse('{{ car_locations | tojson | safe }}');

  // When the page has loaded iterate through your list using javascript
  // and pass the values to your function 
  (function() {
    carLocations.forEach(car => placeCars(car));
  })();

  function placeCars(nextPosition) {
    var position = {
      lat: nextPosition.Location.Latitude,
      lng: nextPosition.Location.Longitude
    };
    new google.maps.Marker({
      position: position,
      map: map
    });
  }

请参阅此答案以将 json 数据传递给您的模板：Passing a JSON object from Flask to JavaScript