Как находить нужный объект по клику из массива объектов?

Question

[maxemga]

Я получаю массив с БД вот такого плана:

Затем из этого массива на странице появляются карточки:

Я хочу сделать коризину путем того, что при нажатии на какую-то карточку, этот объект с именем, ценой и картинкой будет отправлен в бд в раздел Покупки и в Корзине уже таким же образом из массива вставлять товары по таким же примерно карточкам

Но мне не понятно, как сделать чтобы при нажатии на Карточку, в бд уходил именно этот объект? Тоесть нажал на карточку с "Пицца 189р" и в бд ушел именно этот объект

Comments

[edward_freedom]

поставь аттрибут на блок

[maxemga]

edward_freedom, какой атрибут? Не очень понял

[StiflerProger]

maxemga, он имеет ввиду что-то такое

<div class="articles-list">
  <div class="article" data-id="1">
    Товар #1
  </div>
  <div class="article" data-id="2">
    Товар #2
  </div>
</div>

<script>

document.querySelector('.articles-list').addEventListener('click', (event) => {
	console.log(event.target.dataset.id);
})

</script>

[edward_freedom]

Aleksandr-JS-Developer, а кто тебе сказал, что твой способ правильный?

[edward_freedom]

Aleksandr-JS-Developer, получается в нетфликс и алиекспресс сидят дурачки, которые хранят многое в аттрибутах? Смысл мне тебе обосновывать, тут два мнения и они вполне рабочие, это как сравнивать механику и автомат

[maxemga]

Aleksandr-JS-Developer, Как понять "вешать обработчик на каждый элемент"?
Типо я получаю данные с бд массивом и этот массив в вывожу в верстку, разве есть еще какие-то варианты?

Answer 1

[vıtalıyırtlach]

// Отрисовываем карточки

const cards = document.querySelectorALl("card selector")
for(const card of cards) {
card.addEventListener("click", e => {
// у каждой карточки в атрибуте id задайте ID индификатор (_id) card.id = _id
const id = e.target.id // получаем индификатор и отправляем на сервер


})
}