Как получить нужный документ из коллекции MongoDB в js код с помощью _id?

Рейтинг: -1Ответов: 1Опубликовано: 01.06.2023
  1. На странице .ejs отображаются некоторые данные из коллекции БД. Код укорочен и используется только id и nameEvent.
  2. Нажимая на кнопку "Buy" я передаю id одного из документов, который в дальнейшем хочу изменить.
  3. Вместо того, чтобы получить id выбранного документа я всегда получаю последний документ из коллекции. Как сделать так, чтобы выбирался конкретный элемент? введите сюда описание изображения

$(document).ready(function() {
      $(".sendRequest").click(function() {
            var id = '<%-events._id%>'
            console.log("Var from .ejs form: " + id); // Тут всегда получается последний документ коллекции.
          };
<!--Укороченная версия кода-->
<ul>
  <% for (var events of event){ %>
    <!--Пытаюсь получить все докементы Events из БД-->
    <li>
      <!--Далее отображаются все документы отображаются. У кажфого документа есть id-->
      <form id="<%=events._id%>" class="eventForm" method="post" action="/bookedEvent">
        <input type="text" placeholder="<%=events._id%>">
        <!---->
        <input type="text" id="nameEvent" name="nameEvent" placeholder="<%=events.nameEvent%>" readonly>
        <!--Этот же id я передаю с помощью button-->
        <button id="<%=events._id%>" type="button" class="sendRequest">Buy</button>
      </form>
    </li>
    <% } %>
</ul>

                                    readonly>
javascript html node.js mongodb ejs
Источник: Stack Overflow на русском

Ответы

▲ 0

Как сделать так, чтобы выбирался конкретный элемент?

Для этого нужно:

  • Привести в порядок разметку страницы, удалив дублирование id
  • Использовать другой подход к обработке клика и работе с данными страницы

Например вот так можно получать нужные id разных форм.

$('.sendRequest').on('click', e => {
  e.preventDefault()
  const o = e.target.closest('.eventForm')
  console.log(o.id)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li>
      <form id="id_1" class="eventForm" method="post" action="/bookedEvent">
        <input type="text" />
        <input type="text" id="nameEvent" name="nameEvent" readonly />
        <button type="button" class="sendRequest">Buy</button>
      </form>
    </li>
    <li>
      <form id="id_2" class="eventForm" method="post" action="/bookedEvent">
        <input type="text" />
        <input type="text" id="nameEvent" name="nameEvent" readonly />
        <button type="button" class="sendRequest">Buy</button>
      </form>
    </li>
    <li>
      <form id="id_3" class="eventForm" method="post" action="/bookedEvent">
        <input type="text" />
        <input type="text" id="nameEvent" name="nameEvent" readonly />
        <button type="button" class="sendRequest">Buy</button>
      </form>
    </li>
</ul>