@Alex_87

Как через id вывести остальную информацию о товаре?

Здравствуйте! Ребята, я прошу помочь с пониманием по следующему вопросу!
Делаю бэкенд с посредством mongoDB.
Необходимо сделать:
1) Вывести список товара
2) При клике на товар, зайти на страницу товара
Как я вижу решение первого вопроса(я опускаю детали, говорю абстрактно)
По первому вопросу! Идёт запрос через fetch
fetch('http://localhost:3300/api/v5/products')
  .then((response) => {
    return response.json();
  })
  .then((data) => {
     listOfPoduct(data);
           });


На странице вывода списка товара
function listOfPoduct ({ description, id, image, name, price }) {
  const card = document.createElement('div');
  card.insertAdjacentHTML('beforeend', `
    <img src=${image} alt=${name} class="card-image"/>
    <div class="card-text">
      <div class="card-heading">
        <h3 class="card-title card-title-reg">${name}</h3>
      </div>
      <div class="card-info">
        <p class="ingredients">${description}</p>
      </div>
      <div class="card-buttons">
        <a рука=”#” class=”addToProductPage”>переход на страницу товара</a>
        <strong class="card-price card-price-bold">${price} ₽</strong>
      </div>
    </div>
  `);
}

Вроде бы правильно, поправьте меня пожалуйста, если что-то не так.
По второму вопросу, переход на страницу одного товара!
Вот тут возникает не понимание, как это работает.
Ясно, что подобная функция должна принимать в качестве параметра, но:
a) как это правильно передать и где, в html файле или через событие в js?
b) Как правильно написать эту функцию? Как зная id, обратиться к другим полям именно этого товара? Напоминаю, что данные находятся в json файле
К примеру
{
            "id":"2121",
            "name":"Sup merzi",
            "count":"50g",
            "type":"[vegan, '']",
            "text":"Lorem impus",
            "ingrediente":"Lorem impus...",
            "valabil":"2121",
            "pret":"50",
          },
  • Вопрос задан
  • 108 просмотров
Решения вопроса 1
wapster92
@wapster92 Куратор тега JavaScript
Во время формирования списка товаров, задавай им id товара, в одноименный атрибут можно, можешь в дата атрибут, тут как удобней. При клике на элемент списка считывай данный id и отправляй get запрос на бэк указывая в url id товара или post запрос, тогда можешь в body его просто записать. На бэке обрабатывай id и отправляй на фронт нужный документ из бд.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы