Как найти нужный объект в массиве по клику на DOM элемент

Question

Посылаю сигнал SOS) В общем суть такая. Есть массив объектом, с 1 св-вом HTML. На основе которого строится html документ.

   const cardsArr = [
   {
      name: 'CJ',
      htmlCode: `<div class="card">
      <div class="card__inner">
         <div class="card__back "></div>
         <div class="card__front card--cj"></div>
      </div>
   </div> `,
   },
   {
      name: 'CJ',
      htmlCode: `<div class="card">
      <div class="card__inner">
         <div class="card__back "></div>
         <div class="card__front card--cj"></div>
      </div>
   </div> `,
   },
   {
      name: 'Big-Smoke',
      htmlCode: `<div class="card">
      <div class="card__inner">
         <div class="card__back "></div>
         <div class="card__front card--big-smoke"></div>
      </div>
   </div> `,
   },
   {
      name: 'Raider',
      htmlCode: `<div class="card">
      <div class="card__inner">
         <div class="card__back "></div>
         <div class="card__front card--raider"></div>
      </div>
   </div> `,
   },
   {
      name: 'Cop',
      htmlCode: `<div class="card">
      <div class="card__inner">
         <div class="card__back "></div>
         <div class="card__front card--cop"></div>
      </div>
   </div> `,
   },
]

А вот так вставляю в документ:

    cardsArr.forEach(el => {

   const containerEl = document.querySelector('.main__container');

   containerEl.insertAdjacentHTML('beforeend', el.htmlCode);
})

ВОПРОС: Как мне связать DOM объект, который я строю с этим же объектом массива? Как мне отследить и найти по клику на DOM элемент и найти этот же объект в массиве? Я пытался сравнивать outerHTML и св-во объекта c html, но так почему-то не выходит и выдает false, хотя они одинаковы и тип Строка. Надеюсь вопрос понятен)

Answer 1

Если вы ничего больше не вставляете в '.main__container', можете получить индекс кликнутого элемента, а потом использовать его же в массиве карточек:

const index = [...document.querySelectorAll('.main__container > div')]
                .indexOf(clickedElement);
const card = cardsArr[index];

БЛОГ НА HUSL

Как найти нужный объект в массиве по клику на DOM элемент

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