Как l oop над списком из Flask в Javascript?

Question

Я пытаюсь передать список из базы данных из Flask в Javascript для создания маркеров API Карт Google. Например, с Flask я перехожу к дому. html список автомобилей и их долгота и широта. Затем я хочу l oop над этим списком, создать маркер карты Google для каждого местоположения и поместить его на карту.

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

Я думаю, что проблема, с которой вы столкнулись, заключается в том, что 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 данных в ваш шаблон: Передача JSON объекта от Flask до JavaScript

Answer 2

Используйте это

{{cars.Location.longitude}}

Вы должны обернуть его в {{ }}