1

estoy intentando realizar una accion basica con el metodo filter de django pero no encuentro la forma de hacerlo. Tengo un array de objetos llamado articulosCarrito, y quiero retirar de el el objeto que coincida con las siguientes condiciones al mismo tiempo. que el atributo talla del objeto sea 5 y que su id sea 26 por ello utilizo la siguiente sentencia

articulosCarrito = articulosCarrito.filter((producto) => {
            return producto.talla !== 5 && producto.id !== 26
        }); 

El problema es que en ve de retirar del array el objeto que cumple con esas dos condiciones a la vez, me retira del array cualquier objeto que cumpla una de esas dos condiciones por separado, con que un objeto cumpla una de esas dos condiciones me lo retira del array.

2
  • 5
    Cambia la lógica de comparación de tal forma que devuelvas sólo aquellos que no cumplan ambas. Actualmente, si aplicamos álgebra booleana a tu condición, resulta que no estás haciéndolo correctamente. Recuerda: el AND de las negaciones es la negación del OR. Tu deseas la negación del AND, por lo tanto has de escribirlo como return !(producto.talla === 5 && producto.id === 26);. Prueba eso y comenta el resultado. el 6 ago. 2021 a las 13:46
  • Muchas gracias Mauricio por la ayuda, me ha funcionado perfectamente como tu decias.
    – solnegro88
    el 6 ago. 2021 a las 14:33

2 respuestas 2

2

Básicamente el problema está en la forma en que estás intentado aplicar la lógica condicional para filtrar tus elementos.

Es bastante común olvidar o no entender el concepto de álgebra booleana o Álgebra de Boole que hay subyacente cuando escribimos una estructura condicional, sin embargo una lectura rápida de la teoría y un par de ejemplos nos lo pueden aclarar.

Supongamos que deseamos filtrar de una lista de elementos aquellos que cumplen 2 condiciones particulares al mismo tiempo. Como ejemplo vamos a usar objetos con 2 atributos (left y right), con valores tipo Booleano:

{ left: <boolean>, right: <boolean> }

Si deseamos filtrar aquellos elementos que cumplan la condición que tanto left como right sean verdaderos (true), podemos escribir el siguiente código:

let values = [
  {left: true, right: true},
  {left: true, right: false},
  {left: false, right: true},
  {left: false, right: false},
];

let filtered = values.filter(value => {
  return value.left && value.right;
  // podríamos usar comparación value.left === true
  // pero dado que los valores son booleanos, en este caso no hace falta
});

console.log(filtered);
.as-console-wrapper {
  min-height: 100%;
  top: 0;
}

Como se observa, se devuelve el primer elemento de la lista ya que es el único que cumple la condición.

Supongamos ahora que deseamos filtrar aquellos elementos que cumplan la condición que left es falso y right es verdadero. Podríamos escribir la siguiente condición:

let values = [
  {left: true, right: true},
  {left: true, right: false},
  {left: false, right: true},
  {left: false, right: false},
];

let filtered = values.filter(value => {
  return !value.left && value.right;
});

console.log(filtered);
.as-console-wrapper {
  min-height: 100%;
  top: 0;
}

Como se observa me devuelve el valor correcto, tal vez para entender un poco mejor la comparación que estamos haciendo lo podemos escribir de esta forma:

return value.left === false && value.right === true;

Donde esto: value.left === false es equivalente a esto: !value.left, por algo muy sencillo: el operador lógico de negación (!) aplicado sobre un valor booleano: devuelve false si el argumento es verdadero y devuelve true en caso contrario.

Ahora vamos a analizar el caso que presentas en tu pregunta: queremos filtrar elementos que cumplan la siguiente condición: left no debe ser verdadero (value.left !== true) y right no debe ser verdadero (value.right !== true).

Nuestro primer impulso es escribir la siguiente sentencia condicional:

return value.left !== true && value.right !== true;

Ya que entendemos que vamos a devolver aquellos valores cuyo campo left no es verdadero y a la vez su campo rigth tampoco es verdadero. Vamos a probarlo:

let values = [
  {left: true, right: true},
  {left: true, right: false},
  {left: false, right: true},
  {left: false, right: false},
];

let filtered = values.filter(value => {
  return value.left !== true && value.right !== true;
});

console.log(filtered);
.as-console-wrapper {
  min-height: 100%;
  top: 0;
}

El resultado no es el esperado ¿Porqué?.

Si analizamos bien la condición desde un punto de vista un poco más lógico, estamos pidiendo que el valor de left sea tal que su negación devuelva true Y que el valor de right sea tal que su negación también devuelva true.

El único elemento que cumple dichas condiciones es aquel cuyos elementos left y right son ambos falsos.

Ahora que hemos interpretado bien lo que significa la condición usada, nos damos cuenta que no es lo que en principio queremos.

Resulta que hemos sido alcanzados por las Leyes de Morgan de la lógica proposicional. Donde sin pensarlo hemos pensado que la conjunción de las negaciones es igual a la negación de las conjunciones.

En matemática, sobre todo en teoría de grupos, la conjunción se refiere a la selección de todos los elementos de 2 conjuntos diferentes, tales que dichos elementos pertenecen a ambos conjuntos:

Diagrama de Venn para conjunciones - Wikipedia

(Imagen tomada de Wikipedia - Diagrama de Venn)

En razonamiento formal, una conjunción lógica () entre dos proposiciones es un conector lógico cuyo valor de la verdad resulta en cierto solo si ambas proposiciones son ciertas, y en falso de cualquier otra forma.

Por lo tanto, dado que el operador && es el operador de conjunción, estamos ante el caso planteado de que el resultado será verdadero si ambas proposiciones son verdaderas.

Realmente no es lo que estamos buscando. Si volvemos a plantear la proposición, quedaría así:

queremos todos los elementos, excepto aquel cuyos valores left y right son ambos verdaderos.

O dicho de otra forma, los elementos tales que NO tengan left y right verdadero.

Es decir, la sentencia condicional debe tener esta forma:

return !(value.left && value.right);

// o si preferimos usar el operador de igualdad:
return !(value.left === true && value.right === true);

En este caso estamos comparando los valores de left y right, si alguno de ellos es distinto de verdadero, el operador && devolverá false. Luego al aplicar la negación sobre este resultado, obtendremos true.

Por lo tanto, el resultado de la operación de conjunción && será verdadero sólo cuando left y right sean verdaderos, y al aplicar el operador ! obtendremos falso. Así, todos los elementos cuyos valores en left y/o right sean distintos de verdadero superarán el filtro y serán devueltos por nuestra función, quedando fuera sólo el elemento que nos interesa dejar fuera.

El código final se puede ver así:

let values = [
  {left: true, right: true},
  {left: true, right: false},
  {left: false, right: true},
  {left: false, right: false},
];

let filtered = values.filter(value => {
  return !(value.left === true && value.right === true);
});

console.log(filtered);
.as-console-wrapper {
  min-height: 100%;
  top: 0;
}

Y siempre recuerda las Leyes de Morgan cuando necesites aplicar lógica proposicional:

La negación de la conjunción es la disyunción de las negaciones.

O lo que es lo mismo:

La negacion del AND es el OR de las negaciones:

!(A && B) <=> !A || !B

Leyes de Morgan: negación de disyunción - Wikipedia

Y por otro lado:

La negación de la disyunción es la conjunción de las negaciones.

O lo que es lo mismo:

La negación del OR es el AND de las negaciones:

!(A || B) <=> !A && !B

Leyes de Morgan: negación de conjunción - Wikipedia

Espero que esto te ayude a resolver el problema y te aclare un poco el tema sobre lógica proposicional.

2

Aquí te dejo una forma de conseguir el resultado que buscabas, igualmente me quede cavilando el motivo por el cual no funciono como lo planteaste.

Alguien puede agregar un detalle porque funciona con O || y no funciona con Y &&?

let articulosCarrito = [
{id:1, talla: 42},
{id:2, talla: 43},
{id:3, talla: 43},
{id:4, talla: 45},
{id:5, talla: 45},

]



let filtrado = articulosCarrito.filter( producto => (producto.talla !== 43 || producto.id !== 2) ); 

document.getElementById("original").innerHTML = articulosCarrito.map(articulo => `<li>ID: ${articulo.id} - Talla: ${articulo.talla}</li>`).join("")

document.getElementById("Filtrado").innerHTML = filtrado.map(articulo => `<li>ID: ${articulo.id} - Talla: ${articulo.talla}</li>`).join("")
<h1>Original</h1>
<ul id="original"></ul>

<h2>Filtrado</h2>
<ul id="Filtrado"></ul>

0

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.