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

Question

[Андрей Федосеев]

Есть данные в формате:

let data = {
  "orders": [
    {
      "order_id": 1,
      "adres": "Москва-сити,первый красногвардейский проезд,16б"
    }, {
      "order_id": 2,
      "adres": "Подольск, мкр Климовск, по-кт 50-летия Октября, 10"
    }, {
      "order_id": 3,
      "adres": "г. Павловский Посад, 4-й Захаровский переулок, д. 6"
    }, {
      "order_id": 4,
      "adres": "волгоградский проспект, д1572"
    }
  ]
};

Задача сгенерить карту, расставить метки, по клику на метку запускать галерею (фото на сервере в папке с названием %order_id% ).

ymaps.ready(() => {
  let myMap = new ymaps.Map("delivery-map", {
    center: [55.610906, 37.488429],
    zoom: 8
  });
  
  let myGroup = new ymaps.GeoObjectArray({}, {
    strokeWidth: 14,
    geodesic: true
  });
    
  for (let i in data.orders) {
    let id = data.orders[i].order_id;
    let location = data.orders[i].address;
    
    console.log(`${id}\t${location}`);

    ymaps.geocode(location, {
      results: 1
    }).then(r => {
      let c = r.geoObjects.get(0).geometry.getCoordinates(),  
      let p = new ymaps.Placemark(c, {
        iconContent: id,
        hintContent: location
      });
      
      console.log(`${id}\t${location}`);
      
      myGroup.add(p);
    });
  }
  
  myMap.geoObjects.add(myGroup);
});

Собственно вопрос: почему так происходит и как сделать чтобы в метку

p = new ymaps.Placemark(c, { iconContent: id, hintContent: location });

писались данные текущей итерации (id нужен для запуска галереи).
https://jsfiddle.net/ygtke0kt/1/

Comments

[gleendo]

Когда уже пользователи научаться нормально оформлять вопросы. Вам самому приятно читать такой код? Почитайте про стиль написания кода. В такой лапше даже разбираться не хочется.

// Хотя бы так...
let data = {
  "orders": [
    {
      "order_id": 1,
      "address": "Москва-сити,первый красногвардейский проезд, 16б"
    }, {
      "order_id": 2,
      "address": "Подольск, мкр Климовск, по-кт 50-летия Октября, 10"
    }, {
      "order_id": 3,
      "address": "г. Павловский Посад, 4-й Захаровский переулок, д. 6"
    }, {
      "order_id": 4,
      "address": "волгоградский проспект, д1572"
    }
  ]
};

ymaps.ready(() => {
  let myMap = new ymaps.Map("delivery-map", {
    center: [55.610906, 37.488429],
    zoom: 8
  });
  
  let myGroup = new ymaps.GeoObjectArray({}, {
    strokeWidth: 14,
    geodesic: true
  });
    
  for (let i in data.orders) {
    let id = data.orders[i].order_id;
    let location = data.orders[i].address;
    
    console.log(`${id}\t${location}`);

    ymaps.geocode(location, {
      results: 1
    }).then(r => {
      let c = r.geoObjects.get(0).geometry.getCoordinates(),  
      let p = new ymaps.Placemark(c, {
        iconContent: id,
        hintContent: location
      });
      
      console.log(`${id}\t${location}`);
      
      myGroup.add(p);
    });
  }
  
  myMap.geoObjects.add(myGroup);
});

Answer 1

[Stalker_RED]

Вместо var id используйте let id.

почему так происходит

ymaps.Placemark работает асинхронно.
К тому времени, когда происходит отрисовка первой метки, цикл var i in... уже закончил работу и в переменной id осталось последнее значение из цикла.

Читать про "область видимости переменных" и "замыкания".

Если нужна поддержка браузеров к которых нет let, то можно перенести объявление переменной id туда-же где и "c".

(Хотя в таких браузерах и промисы не будут работать, так что это чистый теорикраф :))

Comments

[Андрей Федосеев]

Спасибо

Answer 2

[freeExec]

Достаточно выделить отдельную функцию, куда на вход передавать Ордер, тогда вы не будете зависит от i.