Ajout du même identifiant de produit mais pas d'augmentation de sa quantité

Question

Lorsque vous ajoutez un produit portant le même identifiant de produit, il doit augmenter sa quantité et ne pas pouvoir ajouter de nouvelle ligne. J'ai essayé les commentaires. Veuillez le vérifier ci-dessous le script js. Mais ça ne marche toujours pas.

let Cart = []; 
 

 

 
function viewCart() { 
 

 
    let tr = document.createElement('tr'); 
 
    for (cart of Cart) { 
 
    tr.innerHTML = `<td>${ cart.id }</td> 
 
         <td>${ cart.desc }</td> 
 
         <td>${ cart.qty }</td> 
 
         <td>${ cart.price }</td> 
 
         <td>${ cart.qty * cart.price }</td>`; 
 

 
    } 
 
    cartsTable.appendChild(tr); 
 
} 
 

 
function AddtoCart(productid, description, quantity, price) { 
 
    let inputs = { 
 
    id: productid, 
 
    desc: description, 
 
    qty: quantity, 
 
    price: price 
 
    }; 
 
    Cart.push(inputs); 
 
    viewCart() 
 
}

<script src="script.js"></script> 
 

 
<input type="button" value="Laptop" onclick="AddtoCart('132','Macbook Pro', 1, 100000)" /> 
 
<input type="button" value="Phone" onclick="AddtoCart('456','Iphone 5S', 2, 20000)" /> 
 
<input type="button" value="Camera" onclick="AddtoCart('789','Nikon 3D00', 1, 40000)" /> 
 

 
<table border="1|1" id="cartsTable"> 
 
    <tr> 
 
    <th>Product ID</th> 
 
    <th>Product Description</th> 
 
    <th>Quantity</th> 
 
    <th>Price</th> 
 
    <th>Total</th> 
 
    </tr> 
 
</table>

Answer 1

Je vous recommande d'utiliser un object au lieu d'un array d'utiliser la productid comme la clé.

const cart = {}; 
 

 
function AddtoCart(productid, description, quantity, price) { 
 
    if (cart[productid]) { 
 
    cart[productid].qty += quantity; 
 
    } else { 
 
    cart[productid] = { 
 
     id: productid, 
 
     desc: description, 
 
     qty: quantity, 
 
     price: price 
 
    }; 
 
    } 
 
    
 
    viewCart(cart); 
 
} 
 

 
function viewCart() { 
 
    let tbody = document.getElementById('cartsBody'); 
 
    tbody.innerHTML = ''; 
 
    Object.values(cart).forEach(content => { 
 
    tbody.innerHTML += `<td>${ content.id }</td> 
 
         <td>${ content.desc }</td> 
 
         <td>${ content.qty }</td> 
 
         <td>${ content.price }</td> 
 
         <td>${ content.qty * content.price }</td>`; 
 

 
    }); 
 
}

<script src="script.js"></script> 
 

 
<input type="button" value="Laptop" onclick="AddtoCart('132','Macbook Pro', 1, 100000)" /> 
 
<input type="button" value="Phone" onclick="AddtoCart('456','Iphone 5S', 2, 20000)" /> 
 
<input type="button" value="Camera" onclick="AddtoCart('789','Nikon 3D00', 1, 40000)" /> 
 

 
<table border="1|1" id="cartsTable"> 
 
    <thead> 
 
    <tr> 
 
     <th>Product ID</th> 
 
     <th>Product Description</th> 
 
     <th>Quantity</th> 
 
     <th>Price</th> 
 
     <th>Total</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody id="cartsBody"> 
 
    </tbody> 
 
</table>