How to get data-attribute value when clicking on custom placemarks?

Question

Yandex maps

I iterate over the array and attach the data-id attribute to each created element, which I then want to get when clicked.

Initial data:

const fakeShops = [
    { name: "name1", cord: [55.751574, 37.573856] , id:1 },
    { name: "name2", cord: [56.751574, 38.573856] , id:2 },
    { name: "name3", cord: [57.751574, 39.573856] , id:3 },
    { name: "name4", cord: [58.751574, 40.573856] , id:4 },
  ];

Here is my code, everything works. But when clicking on different labels, the data-attribute turns out to be the same:

fakeShops.forEach((shop,i)=>{
    let content = ymaps?.templateLayoutFactory?.createClass(
      `<div id="map_point" data-id=${fakeShops[i].id} class="text">
      123
      <div class="place_title">
      <div>test</div>
      <div>
      <img src="https://cdn1.iconfinder.com/data/icons/interface-travel-and-environment/64/star-interface-256.png" style="width:12px;heigth:12px">
      <span class="text_small">
      4,5 Капучино от 190 р
      </span>
      </div>
      </div>
      </div>`
    );
      const myGeoObject = new ymaps.Placemark(
        fakeShops[i].cord,
        {
          hintContent: fakeShops[i].name,
        },
        {
          iconLayout: content, 
          iconShape: {
            type: "Rectangle",
            coordinates: [
              [-95, -88],
              [85, 78],
            ],
          },
        }
      );
        localMap.geoObjects.add(myGeoObject);
        myGeoObject.events.add("click", function (e) {
          const dom = document.getElementById("map_point");
          console.log(dom.dataset.id); // тут выводит всегда 1 , проблемка
        });
  })

What am I doing wrong?

Answer 1

No data attributes are needed. Pass these id to properties (second constructor parameter) of placemarks, when clicked, get:

e.get('target').properties.get('имяСвойстваСодержащегоId')

Well, as for the code you showed...

• Почему в шаблоны placemark'ов зашивается id? Неужели вы до сих пор не в курсе, что id должны быть уникальны? Кстати, поэтому у вас и "выводит всегда 1" - ищите элемент по id, вот и получаете всегда первый из созданных.
  
• Зачем вообще понадобилось искать элемент и читать data-атрибут, значение которого вам и так доступно внутри обработчика (shop.id)?
  
• Создавать отдельный layout под каждый placemark не надо. Вынесите создание layout'а за пределы цикла. Если надо передавать в шаблон какие-то уникальные значения, то их опять же можно подтянуть из свойств. Как бы это выглядело для вашего data-атрибута:
  

  <div data-id="{{ properties.имяСвойстваСодержащегоId }}">

  
  Также не надо создавать отдельные функции, назначаемые в качестве обработчиков клика - создайте один обработчик за пределами цикла (да, достать id из shop после этого уже не получится, как было сказано в начале - передавайте его через properties).