4

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

  1. Al ingresar un producto valide si existe el id en el array

  2. 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>

2 respuestas 2

4

El problema es que haces el push del item siempre, entonces estas duplicando los mismos items.

Con un boolean puedes comprobar si es uno existente o no:

for(k in detalle) {
    if(detalle[k].id == id){
        detalle[k].cantidad += parseInt(cantidad)
        encontrado = true;
    }
}

Y si no lo encuentras lo pusheas a la lista:

if(!encontrado){
    detalle.push(producto)
}

Snippet:

<!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 encontrado = false;
        
            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)
                    encontrado = true;
                }
            }
            
            if(!encontrado){
              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>

1
  • 1
    Gracias @x3k_js adapte tu solución a un CRUD que estoy implementando con RIot js, cada vez que intentaba agregar un producto se duplicaba, pero con tu solución quedo perfecto. Commented el 30 jul. 2019 a las 7:17
0

<!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 productAlreadyExists = false;
        
            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);
                    productAlreadyExists = true;
                }
            }

            if(!productAlreadyExists) {
                detalle.push(producto);
                cargarProducto();
            } else {
                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>

Sólo tienes que controlar y asegurarte que en el caso de que el producto ya exista en el vector detalle no lo insertes de nuevo. Para ello tal y como puedes ver en el ejemplo puedes utilizar un Boolean para comprobar si el producto ya se encuentra en tu inventario o no.

1
  • Gonzales, tu solución por igual funciona, considero que esta de más el else y ejecutar dos veces la función que muestra los productos. Commented el 30 jul. 2019 a las 7:26

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.