0

Como puedo eliminiar elementos duplicados de un array cuando hago el push.Tengo un array llamado carrito que al presionar el boton de agregar (btnAgregar) me hace un push de lo que he presionado(por eso los dataset). El problema es que si presiono dos veces un mismo producto me lo agrega varias veces al array carrito. Como debería hacer para que no hayan elementos duplicados en el array carrito.

let carrito=[]

btnAgregar.onclick=AgregarCarrito;

function AgregarCarrito(){
     //precios
  
    //array carrito
        carrito.push({
            imagen: this.dataset.src,
            nombre: this.dataset.nombre,
            categoria: this.dataset.categoria,
            precio: this.dataset.precio,
            cantidad: parseInt(this.dataset.cantidad),
        });  
  
  
  
    }

3
  • Deberías realizar una búsqueda dentro de tu variable carrito, utilizando un filter, find, etc y en caso que obtengas datos distintos de undefined o 0, - dependiendo el método que uses -, no lo agregas ya que existen el 2 mar. 2021 a las 19:10
  • Como identificas cada producto ?? Lo que te recomiendo es que en tu evento de agregar, primero recorras tu arreglo, si ya existe un producto, solo actualiza la cantidad, pero para hacer eso necesitas identificar cada producto con ID. el 2 mar. 2021 a las 19:27
  • @Michel, tienes acceso a alguna propiedad id para cada producto?
    – g.4
    el 2 mar. 2021 a las 20:10

1 respuesta 1

1

1.- Primero identifica cada producto con un ID

2.- Antes de agregar un nuevo producto, recorre tu arreglo de objetos y valida si el ID del nuevo producto es igual solo actualiza su cantidad, y ya no realizas el push

3.- Te muestro un ejemplo para que puedas entenderlo mejor y aplicarlo a tu proyecto:

1.- Tengo un Boton que simulará agregar un nuevo producto a mi carrito:

let btnAdd = document.querySelector('#add-to-cart');

2.- Tengo un producto de prueba en mi arreglo de carrito:

let carrito = [{
            idProduct: 21,
            imagen: 'Soy una imagen',
            nombre: 'Teclado Gamer',
            categoria: 'Tecnologia',
            precio: '1000MXN',
            cantidad: 4,
        }];

3.- Tengo un nuevo producto de prueba que voy a agregar, nota que ambos tienen el mismo ID:

nuevoProductoAgregado = {
  idProduct: 21,
            imagen: 'Soy una imagen',
            nombre: 'Teclado Gamer',
            categoria: 'Tecnologia',
            precio: '1000MXN',
            cantidad: 4,
}

4.- Le agrego un evento de tipo click a mi boton, este agregará el nuevo producto de prueba

btnAdd.addEventListener('click', function(){
 
})

5.- Dentro de este evento tengo que recorrer mi carrito y verificar si ya existe ese producto, de ser asi, solo actualizo su cantidad:

carrito.forEach((producto) =>{
    if(producto.idProduct === nuevoProductoAgregado.idProduct){
      producto.cantidad++;
    }else{
      //REALIZAS EL PUSH
     }
    console.log(carrito);
  })

Te muestro el ejemplo corriendo, para que puedas testearlo:

let btnAdd = document.querySelector('#add-to-cart');

let carrito = [{
            idProduct: 21,
            imagen: 'Soy una imagen',
            nombre: 'Teclado Gamer',
            categoria: 'Tecnologia',
            precio: '1000MXN',
            cantidad: 4,
        }];


nuevoProductoAgregado = {
  idProduct: 21,
            imagen: 'Soy una imagen',
            nombre: 'Teclado Gamer',
            categoria: 'Tecnologia',
            precio: '1000MXN',
            cantidad: 4,
}

btnAdd.addEventListener('click', function(){
  carrito.forEach((producto) =>{
    if(producto.idProduct === nuevoProductoAgregado.idProduct){
      producto.cantidad++;
    }
    console.log(carrito);
  })
})
<button id="add-to-cart">AGREGAR AL CARRITO</button>

NOTA: En el ejemplo solo estoy sumando de uno en uno En realidad lo que tienes que hacer es sumarle la cantidad del producto en tu carrito, mas la cantidad del producto nuevo. Pero bueno eso lo puedes realizar tu, no tiene mucho misterio.

4
  • Cómo le pasas el ítem desde el front hacia el controller? el 2 mar. 2021 a las 19:59
  • @PauloUrbanoRivera Eso sería otra pregunta, si deseas saber como realizar eso, postula tu pregunta y con gusto te respondo, aunque el item se lo deberías de pasar cuando se realiza el checkout o almenos que quieras validar algo de importancia en ese item, si es necesario pasarlo al backend Puedes realizarlo de manera asincrona con la api de fetch que es propia de JavaScript. Saludos desde México. el 2 mar. 2021 a las 20:04
  • No, la pregunta del OP fue: de que forma puede implementar una actualización o modificación de un item, utilizando sólo una función; entonces, de alguna forma tienes que enviar el item que deseas crear/actualizar desde tu formulario hacia tu controller - dejo fuera la API que se encarga de dicha operacion -, es un punto que deberías tener en cuenta para que el OP tenga un mejor contexto. Y lo otro, no hay necesidad de asignarle mediante JQuery el evento click al botón, para eso AngularJS tiene la propiedad ng-click el 2 mar. 2021 a las 20:08
  • 1
    @PauloUrbanoRivera Creo que andas un poco perdido, en el ejemplo que di solo estoy utilizando Vanilla JavaScript, No hay Jquery, lee detenidamente mi codigo, tu ya estas hablando de cosas mayores, quieres meter a AngularJs cuando el código del usuario es netamente puro de JavaScript, si en las etiquetas de la pregunta estuviera Angular, no hubiera respondido, ya que no se nada de Angular, solo trabajo con ReactJS Saludos cordiales desde México. el 2 mar. 2021 a las 20:13

Tu Respuesta

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

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