Tengo el siguiente problema, creo un producto a través de inputs utilizando un array agrego el producto mediante push.
Lo que pretendo es lo siguiente
Al ingresar un producto valide si existe el id en el array
De existir mostrar un solo producto y sume la cantidad de dicho producto, caso contrario agregar el producto de manera normal.
He intentado hacerlo, me valida y me suma la cantidad, solo que muestra el elemento original y el elemento modificado.
Creo el producto de tipo objeto
let producto = {
id: parseInt(id),
nombre: nombre,
precio: parseInt(precio),
cantidad: parseInt(cantidad)
}
Itero sobre el array utilizando el bucle for...in
for(k in detalle) {
//validación si el id del array es igual al que se esta enviando a través del input
if(detalle[k].id == id){
/*de ser iguales sumo la cantidad que se esta enviando a travès del input
convierto el valor a entero ya que el input se declaro como text, de no ser asi en lugar de sumar el valor simplemente se adicionaria ejemplo 3+3 deberia de ser 6, pero si no se parsea se adicionaria 33
*/
detalle[k].cantidad += parseInt(cantidad)
}
}
/*agrego el producto al array detalle mediante el metodo push
aqui es donde no logro conseguir que solo se sume la cantidad y no se duplique el producto
*/
detalle.push(producto)
//Cargo el producto creado
cargarProducto()
Adjunto el código para que se den una idea de cómo está la situación
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div> <label>Id</label>
<input type="text" id='id'>
<label>Nombre</label>
<input type="text" id="nombre">
<label>Precio</label>
<input type="text" id="precio">
<label>Cantidad</label>
<input type="text" id="cantidad">
<button id="registro" onclick="crearProducto()">Agregar</button>
</div>
<p>Resultado</p>
<div id="res" style="width:800px; height:auto"></div>
<script>
const detalle = [];
const resultado = document.querySelector('#res');
function crearProducto()
{
const id = document.querySelector('#id').value
const nombre = document.querySelector('#nombre').value
const precio = document.querySelector('#precio').value
const cantidad = document.querySelector('#cantidad').value
let producto = {
id: parseInt(id),
nombre: nombre,
precio: parseInt(precio),
cantidad: parseInt(cantidad)
}
for(k in detalle) {
if(detalle[k].id == id){
detalle[k].cantidad += parseInt(cantidad)
}
}
detalle.push(producto)
cargarProducto()
}
function cargarProducto()
{
resultado.innerHTML= '';
for(k in detalle){
resultado.innerHTML += `
<div style="display:block">
<label>Nombre</label>
<input value="${detalle[k].nombre}">
<label>Precio</label>
<input value="${detalle[k].precio}">
<label>Cantidad</label>
<input value="${detalle[k].cantidad}">
</div>
<br>
`
}
}
</script>
</body>
</html>