Filtrar Array de Objetos con otro Array de Objetos en JavaScript

Este artículo explicará cómo filtrar un array de objetos utilizando otro array de objetos en JavaScript. En programación, a menudo necesitamos filtrar los datos de una manera determinada. Esto es especialmente cierto en aplicaciones web, donde necesitamos mostrar solo ciertos datos a los usuarios. Usando JavaScript, podemos filtrar array de objetos basados en cualquier propiedad del objeto o conjunto de propiedades que elijamos.

Filtrando un Array de Objetos con Otro Array de Objetos en JavaScript

Cuando queremos filtrar un array de objetos utilizando otro array de objetos, podemos utilizar el método filter de JavaScript. Este método nos permite filtrar los elementos de un array utilizando una función de retorno de llamada. Aquí está un ejemplo de cómo podemos utilizar filter para filtrar un array de objetos basados en otra matriz de objetos:


// Filter array of objects with another array of objects in JavaScript

let filteredArray = array1.filter(function(obj) {
return !array2.some(function(obj2) {
return obj.id === obj2.id;
});
});
console.log(filteredArray);
// Output: [{id: 1, name: 'John'}, {id: 3, name: 'Mike'}]


En este ejemplo, tenemos dos arrays de objetos, array1 y array2. Queremos filtrar array1 basado en los valores de id de los objetos que están en array2. Para hacer esto, utilizamos el método filter de array1 y proporcionamos una función de retorno de llamada. Dentro de la función de retorno, utilizamos el método some de array2, que devuelve verdadero si al menos un objeto de array2 cumple la condición dada en la función de retorno. Si obj.id y obj2.id son iguales, entonces esto significa que el objeto actual en array1 tiene un id que también está presente en array2, por lo que devolvemos false. Si todo coincide, entonces el objeto actual debe ser incluido en el array filtrado y devolvemos true.

Ejemplos de Código

Ejemplo 1: Filtrando Array de Objetos con otro Array de Objetos en JavaScript

Vamos a utilizar un ejemplo práctico para entender mejor el proceso de filtrado de un array de objetos utilizando otro array de objetos en JavaScript. Supongamos que tenemos una lista de productos con información detallada y una lista de productos que se vendieron en una transacción a alguien. Esta transacción solo debe mostrar los productos que se vendieron, no toda la lista de productos disponibles. Utilizando el método filter, podemos filtrar los productos vendidos a partir de la lista completa de productos.


let productos = [
{id: 1, nombre: 'Mouse', marca: 'Logitech'},
{id: 2, nombre: 'Teclado', marca: 'Microsoft'},
{id: 3, nombre: 'Monitor', marca: 'LG'},
{id: 4, nombre: 'Parlante', marca: 'JBL'}
];

let productosFiltrados = productos.filter(function(producto) {
return !productosVendidos.some(function(vendido) {
return producto.id === vendido.id;
});
});
console.log(productosFiltrados);
// Salida: [{id: 1, nombre: 'Mouse', marca: 'Logitech'}, {id: 3, nombre: 'Monitor', marca: 'LG'} ]


En este ejemplo, tenemos dos arrays de objetos. El primer array contiene la lista completa de productos y el segundo array contiene una lista de productos que se han vendido. Utilizando el método filter, vamos a filtrar los productos que no se vendieron de la lista completa de productos. Para hacer esto, utilizamos la función de retorno de llamada en filter donde comparamos los elementos de cada matriz utilizando some.

Ejemplo 2: Filtrando Array de Objetos con otro Array de Objetos en JavaScript con Propiedades Adicionales

Este ejemplo es similar al primero ejemplo, pero esta vez estamos utilizando objetos que contienen más propiedades que solo id, nombre y marca. En lugar de solo filtrar los productos que se vendieron, vamos a filtrarlos y también agregar un nuevo campo para registrar la cantidad vendida.


let productos = [
{id: 1, nombre: 'Mouse', marca: 'Logitech', stock: 5, precio: 10},
{id: 2, nombre: 'Teclado', marca: 'Microsoft', stock: 3, precio: 15},
{id: 3, nombre: 'Monitor', marca: 'LG', stock: 8, precio: 100},
{id: 4, nombre: 'Parlante', marca: 'JBL', stock: 4, precio: 50}
];

let productosFiltrados = productos.filter(function(producto) {
let vendido = productosVendidos.find(function(vendido) {
return producto.id === vendido.id;
});
if(vendido) {
producto.cantidadVendida = vendido.cantidad;
return true;
} else {
return false;
}
});
console.log(productosFiltrados);
// Salida: [{id: 2, nombre: 'Teclado', marca: 'Microsoft', stock: 3, precio: 15, cantidadVendida: 1}, {id: 4, nombre: 'Parlante', marca: 'JBL', stock: 4, precio: 50, cantidadVendida: 2}]


En este ejemplo, el objetivo es filtrar los productos vendidos y registrar la cantidad vendida junto con detalles de productos. Utilizando el método filter, vamos a filtrar los productos que se vendieron y agregar un nuevo campo cantidadVendida para cada objeto de producto. Para hacer esto, utilizamos la función de retorno de llamada en filter y la función find en productosVendidos donde comparamos los elementos de cada array utilizando id. Si se encuentra una coincidencia, agregamos la cantidadVendida y devolvemos true. De lo contrario, devolvemos false.

Conclusión

Usando el método filter de JavaScript, podemos filtrar array de objetos utilizando otro array de objetos en función de cualquier propiedad o conjunto de propiedades del objeto. Con el ejemplo citado anteriormente, puedes fácilmente filtrar array de objetos y también agregar nuevas propiedades a cada objeto filtrado. Esperamos este artículo te haya sido útil para resolver tus problemas relacionados con filtros de array en JavaScript.

Preguntas Frecuentes

¿Cómo puedo filtrar por propiedades específicas?

Puedes utilizar la función de retorno de llamada en filter para filtrar los objetos que cumplen ciertas condiciones según sus propiedades específicas.

¿Puedo agregar propiedades adicionales a los objetos filtrados?

Sí, puedes agregar propiedades adicionales a cada objeto filtrado utilizando la función de retorno de llamada en filter.

¿Qué otros métodos de array debo considerar al trabajar con array de objetos?

Además del método filter, otros métodos de array que son útiles al trabajar con array de objetos son map, reduce y sort.

¿Cómo puedo crear una función de comparación personalizada en sort?

Puedes crear una función de comparación personalizada en sort proporcionando una función de retorno de llamada que compare dos elementos y devuelva -1, 0 o 1 según el orden de clasificación deseado.

Cómo crear Enumerator en JavaScript

¿Qué es el signo de interrogación '?' en JavaScript?

Cómo verificar la versión de TypeScript

Cómo obtener el último carácter de una cadena en JavaScript

¿Existe un ArrayList en JavaScript?

JavaScript textContent | Explicado

Agrupando un arreglo de objetos en JavaScript

Cómo crear un cuadro de entrada en JavaScript?

Cómo obtener valores distintos de un arreglo de objetos en JavaScript