Conditional statement limiting the number of displayed elements


I’m having trouble implementing the logic that will limit me from adding the same items to my shopping list. When the item is the same, I just want to display the quantity with the existing item.

    <div class="pizzas">
    </div>
    <div class="shoppingCart">
        <p class="totalPrice">Hungry? order our pizzas</p>
    </div>

// js

fetch("https://raw.githubusercontent.com/alexsimkovich/patronage/main/api/data.json")
.then(data => data.json())
.then(data => {
let valueCurrency = 0;
data.forEach(element => {
    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) => {
        valueCurrency = valueCurrency + element.price;

        const pizza = document.createElement("div");
        pizza.className = "pizzaList";
        const pizzasList = document.createElement("li");
        const pizzaPrice = document.createElement("p");
        const count = document.createElement("h5");
        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 === pizzasList)
        {
            // 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) => {
            pizza.remove();
            valueCurrency = valueCurrency - element.price;
            totalPrice.innerText = "Całkowita cena: " + valueCurrency.toFixed(2);
        })
    })

});
 
})
.catch(err => console.log(err));

My problem is exactly in the conditional statement, I don’t know exactly how to implement the counting of the same pizzas option.

Thank you in advance for your help.

Source: JavaSript – Stack Overflow

November 28, 2021
Category : News
Tags: fetch | html | if-statement | javascript | json

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.