#javascript #html #json #if-statement #fetch
#язык JavaScript #HTML #json #если-заявление #извлечь
Вопрос:
У меня возникли проблемы с реализацией логики, которая не позволит мне добавлять одни и те же товары в список покупок. Когда товар один и тот же, я просто хочу отобразить количество с существующим товаром.
lt;div class="pizzas"gt; lt;/divgt; lt;div class="shoppingCart"gt; lt;p class="totalPrice"gt;Hungry? order our pizzaslt;/pgt; lt;/divgt; // js fetch("https://raw.githubusercontent.com/alexsimkovich/patronage/main/api/data.json") .then(data =gt; data.json()) .then(data =gt; { let valueCurrency = 0; data.forEach(element =gt; { const shoppingCart = document.querySelector(".shoppingCart"); const pizzas = document.querySelector(".pizzas"); const box = document.createElement("div"); const img = document.createElement("img"); const title = document.createElement("h3"); const ingredients = document.createElement("p"); const price = document.createElement("h4"); const btn = document.createElement("button"); const totalPrice = document.querySelector(".totalPrice"); box.className = "box"; ingredients.className = "ingredients" btn.className = "btn"; img.src = element.image; img.className = "img"; title.innerHTML = element.title; ingredients.innerHTML = element.ingredients; price.innerHTML = element.price.toFixed(2) " zł"; btn.innerHTML = "Dodaj do koszyka"; box.appendChild(img); box.appendChild(title); box.appendChild(ingredients); box.appendChild(price); box.appendChild(btn); pizzas.appendChild(box); btn.addEventListener("click", (e) =gt; { valueCurrency = valueCurrency element.price; const pizza = document.createElement("div"); pizza.className = "pizzaList"; const pizzasList = document.createElement("li"); const pizzaPrice = document.createElement("p"); const btnRemove = document.createElement("button"); btnRemove.innerText = "X"; pizzasList.innerText = title.textContent; pizzaPrice.innerText = price.textContent; pizza.appendChild(pizzasList); pizza.appendChild(pizzaPrice); pizza.appendChild(btnRemove); totalPrice.innerText = "Całkowita cena: " valueCurrency.toFixed(2); if(pizzasList.innerText === pizzasList.innerText) { // don't add another item to the list // just add 1 to existing element } else { // add an item to the list shoppingCart.prepend(pizza); } btnRemove.addEventListener("click", (e) =gt; { pizza.remove(); valueCurrency = valueCurrency - element.price; totalPrice.innerText = "Całkowita cena: " valueCurrency.toFixed(2); }) }) }); }) .catch(err =gt; console.log(err)); Моя проблема заключается именно в условном выражении, я точно не знаю, как реализовать подсчет одной и той же опции пиццы.
Заранее благодарю вас за вашу помощь.
Ответ №1:
Поскольку вы используете для этого элементы html, вы можете использовать атрибут данных в элементе pizza и увеличивать его каждый раз, когда вам это нужно.
Что-то вроде:
if(pizzasList === pizzasList) { pizza.dataset.total = Number(pizza.dataset.total) 1; } else { pizza.dataset.total = 1; shoppingCart.prepend(pizza); } Затем просто используйте pizza.dataset.total , чтобы пересчитать общее количество повторений.
Комментарии:
1. к сожалению, условие написано неправильно и плохо работает
2. вы хотите знать, что написать на условии или внутри него? В любом случае, я думаю, что ваш подход не самый лучший, почему вы используете html-элементы для сохранения данных? Почему бы не использовать просто простые структуры данных, такие как объекты или массивы?
3. Я попытался добавить отдельные пиццы на доску, но возникли некоторые проблемы с реализацией, и я оставил это. Я думал, что смогу как-то это сделать в том состоянии, когда при появлении той же пиццы она будет добавлена только к существующему товару, а не снова добавлена в список. Я хочу знать, что написать об этом условии.
4. Я думаю, вам нужно добавить какой-то идентификатор к вашей пицце, например идентификатор, чтобы вы могли сравнить их и посмотреть, были ли они уже заказаны или нет
5. У меня больше нет идей, мне нужно реализовать только одну вещь, и она немного сдается