Tengo una lista gigante de entradas con miles de elementos, he creado una lista de filtros de casilla de verificación para cada columna que es una lista única de cada valor en esa columna. Ahora quiero filtrar la lista según las casillas de verificación en las que el usuario hace clic en la aplicación. La lista se parece a esto
[{ Value1: "val", Value2: "more value", Value3: "1" },{ Value1: "val1", Value2: "test", Value3: "1" },{ Value1: "val1", Value2: "test", Value3: "2" },{ Value1: "val", Value2: "test", Value3: "3" }];Entonces los filtros se verían así.
Valor1
valor2
valor 3
si un usuario marca 3 en las casillas de valor 3, solo quiero mostrar los objetos con valor 3 = 3, si marca 2 en las casillas de valor 3, quiero mostrar valor 3 = 3 O valor 3 = 2. si marca val1 en valor 1 cuadros quiero mostrar objetos donde Valor 3 = 3 O 2 Y valor 1 = val1. lo que significa que solo mostraría el tercer elemento en la matriz porque cumple con las 3 condiciones.
¿Cómo puedo lograr esto usando Typescript/Javascript? Todos los valores filtrables son cadenas
actualmente estoy intentando algo como esto, pero eso solo muestra todo lo que tiene un valor coincidente.
let newFilterObj = [{ fieldName: "value3", value: "3" }, { fieldName: "value3", value: "2" }, { fieldName: "value1", value: "val1" }] let newList = ListAllItems.filter((i) => { const found = newFilterObj.some(element => { return i[element.fieldName] === element.value; }); return found; });puedes hacer algo como esto
básicamente agrupas todos tus filtros por clave
de lo que usa every para la condición AND
e include para la condición OR
const applyFilters = (data, filter) => { const groupFilter = Object.values(filter.reduce((res, {fieldName, value}) => { const existingFilter = res[fieldName] || {fieldName, values:[]} return { ...res, [fieldName]: { ...existingFilter, values: [...existingFilter.values, value] } } }, {})) return data.filter(d => groupFilter.every(f => f.values.includes(d[f.fieldName]))) } const ListAllItems = [{ Value1: "val", Value2: "more value", Value3: "1" },{ Value1: "val1", Value2: "test", Value3: "1" },{ Value1: "val1", Value2: "test", Value3: "2" },{ Value1: "val", Value2: "test", Value3: "3" }]; let newFilterObj = [{ fieldName: "Value3", value: "3" }, { fieldName: "Value3", value: "2" }, { fieldName: "Value1", value: "val1" }] console.log(applyFilters(ListAllItems, newFilterObj))Debe recopilar todos los valores de filtro disponibles y luego verificar
const ListAllItems = [{ value1: 'val', value2: 'more value', value3: '1', }, { value1: 'val1', value2: 'test', value3: '1', }, { value1: 'val1', value2: 'test', value3: '2', }, { value1: 'val', value2: 'test', value3: '3', }, ] let newFilterObj = [{ fieldName: 'value3', value: '3' }, { fieldName: 'value3', value: '2' }, { fieldName: 'value1', value: 'val1', }, ] const filedValues = {} newFilterObj.forEach(({ fieldName, value }) => { if (filedValues[fieldName]) { filedValues[fieldName].push(value) } else { filedValues[fieldName] = [value] } }) console.log(filedValues) /* { "value3": [ "3", "2" ], "value1": [ "val1" ] } */ let newList = ListAllItems.filter((i) => { for ([key, value] of Object.entries(filedValues)) { if (!value.includes(i[key])) { return false } } return true }) console.log('newList', newList) /* [ { "value1": "val1", "value2": "test", "value3": "2" } ] */