Условие на повторное значение в цикле

Question

var page = "";
for (let i = 0; i < document.querySelectorAll('.slider__subtitle').length; i++) {
    const element = document.querySelectorAll('.slider__subtitle')[i];
    page += "<div class='map__point-text' data-id='" + element.dataset.id + "' style='top: " +
        (+topPointMap[i] + 180) + "px; left: " + (+leftPointMap[i] + 65) + "px;'>" + element.innerText + "</div>";
}
document.querySelector('.map__maps').innerHTML = page;

Подскажите как решить проблему.

Код выше создает блоки с нужными значениями. Я столкнулся с ситуацией когда у блоков data-id повторяется и код создает отдельные блоки, а нужно чтоб при повторном data-id у этих блоков складывалась строка element.innerText и создавался один блок data-id со всеми значениями element.innerText

data-id(1) element.innerText(111)
data-id(2) element.innerText(222)
data-id(1) element.innerText(333) = data-id(1) element.innerText(111333)

В двух словах для чего это: Делаю интерактивную карту с элементами(города) на ней. Задача при наведении на город выводится окно с объектами на которых работала организация. И есть города где было n количество объектов, и соответственно при на ведении на город выводится n количество окон а должно выводится 1 окно со всеми объектами.

Answer 1

Предлагаю сначала сформировать а уже потом по ней сформировать html

const elements = document.querySelectorAll('.slider__subtitle');
const collection = {};
for(let i = 0; i < elements.length; i++) {
    const key = elements[i].dataset.id;
    // Список используется чтоб можно было объединить объекты с помощью JOIN 
    // через нужный сепаратор
    if (!collection[key]) collection[key] = [];
    collection[key].push(elements[i].innerText);
}

const resultHtml = Object.keys(collection)
  .reduce((result, key) => {
    return result + "<div class='map__point-text' data-id='" + key + "' style='top: " +
        (+topPointMap[i] + 180) + "px; left: " + (+leftPointMap[i] + 65) + "px;'>" 
        + collection[key].join('') + "</div>";
  }, '');

document.querySelector('.map__maps').innerHTML = resultHtml;

БЛОГ НА HUSL

Условие на повторное значение в цикле

Ответы (1 шт):