如何在Javascript中循环使用Flask中的列表？

我正试图从Flask数据库中传入一个列表，并将其转换为Javascript，以生成GoogleMapsAPI标记。 例如，从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 %}
    }

用这个

{{cars.Location.longitude}}

您应该将其包装在

{{}

中使用此

{{cars.Location.longitude}}

---

您应该将其包装在

{{}

中，我认为您遇到的问题是flask将在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数据传递到模板，请参见以下答案：

我认为您遇到的问题是flask将在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数据传递到模板的问题，请参见以下答案：

这看起来会起作用，谢谢。只要得到一个错误“TypeError:CarLocations类型的对象不可JSON序列化”，就可以进行一些调查。这看起来是可行的，谢谢。只要得到一个错误“TypeError:CarLocations类型的对象不可JSON序列化”，就可以进行一些调查