Rocket2253
@Rocket2253

Как в массив занести несколько объектов в цикле?

Я очень плохо понимаю JS так что не судите. Нужно просто решить задачу.
А задача такая, получить массив markersData в котором будут содержаться 3 объекта содержащие названия и координаты городов

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div class="projects_locations">москва</div>
	<div class="projects_locations">нижний новгород</div>
	<div class="projects_locations">тюмень</div>

<script   src="http://code.jquery.com/jquery-3.1.0.min.js"
integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s="
crossorigin="anonymous"></script>
<script>
function locationsLoad() {

    //создаем массив с названиями взятыми из элементов с классом projects_locations
    var locations = $('.projects_locations'),
        locations = locations.map(function(){
            return $(this).text();
        }).get();

    console.log(locations);
          
    var markerData = {address: '', lat: '', lng: ''};
    var markersData = [];

    //Цикл по обработке каждого элемента полученного массива с названиями мест на карте
    for (var i = 0; i < locations.length; i++) {
      var location = locations[i];
      //Получаем данные о месте в JSON формате
      var GoogleAPI = 'https://maps.googleapis.com/maps/api/geocode/json?address='
                                  + location + '&key=AIzaSyAFdomPsUUDvJOFlAYuyr7DnyHQra_BQSU';

      console.log('Итерация ' + i);

      //Обрабатываем JSON, присваеваем в объект нужные данные
      $.getJSON(GoogleAPI, function(json) {
          var locationData = json.results[0];
          markerData.address = locationData.formatted_address;
          markerData.lat = locationData.geometry.location.lat;
          markerData.lng = locationData.geometry.location.lng;

          markersData[i] = markerData;
          //тут вопрос, у меня не получается присвоить массиву
          //несколько объектов именно в данном случае, потому что
          //не знаю какую нумерацию использовать.
          //Чтобы было понятнее запустите у себя код

          console.log('Итерация ' + i);
          console.log(markerData);
          console.log('---');
          
      });//getJSON

    }//for

    console.log(' ');
    console.log('=====================');
    console.log('Конец функции ');
    console.log('=====================');
    console.log(' ');
}

locationsLoad();
</script>
</body>
</html>
  • Вопрос задан
  • 242 просмотра
Решения вопроса 1
Rocket2253
@Rocket2253 Автор вопроса
Суть была в том что массив markersData в итоге содержал 3 идентичных объекта, а должен был разные. Решение нашел следующее:
Строчку
var markerData = {address: '', lat: '', lng: ''};
Нужно перенести внутрь метода getJSON, чтобы объект обнулялся на каждой итерации:
//Обрабатываем JSON, присваеваем в объект нужные данные
      $.getJSON(GoogleAPI, function(json) {

          var markerData = {address: '', lat: '', lng: ''};

          var locationData = json.results[0];
          markerData.address = locationData.formatted_address;
          markerData.lat = locationData.geometry.location.lat;
          markerData.lng = locationData.geometry.location.lng;

          markersData[i] = markerData;
          
      });//getJSON


в таком случае массив заполнился правильно и в нем содержатся 3 разных объекта относящихся к 3м городам
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы