Здравствуйте! Ребята, я прошу помочь с пониманием по следующему вопросу!
Делаю бэкенд с посредством 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",
},