Estoy trabajando actualmente en una barra de filtro. Usando la forma de gancho de reacción {useForm}. Lo que trato de lograr cuando consola. log (reloj ()) Obtengo una matriz de los elementos del formulario de filtro,
Puedo ver que contiene mis elementos de filtro, todos geniales. Tengo fechas como cadena y campos de autocompletar como matriz.
En el punto, tengo un objeto defaultValues con todos los campos vacíos, por lo que no hay filtro predeterminado. Quiero comparar valores predeterminados (que son campos vacíos) con elementos de observación, por lo que si tengo filtros activos, quiero contarlos y devolver el número en la barra de filtro como un número.
¿Podría ayudarme a compararlos y también contar si el elemento watch () no está vacío, nulo o indefinido que aumentar el recuento?
export const defaultValues = { id: [], dateFrom: '', dateTo: '', numbers: [], cars: [], }Respuesta de console.log(wathc()):
{id: Array(2), dateTo: "2022-04-31T00:00:00.000Z", dateFrom: "", cars: Array(0), numbers: Array(0)}Uno de la matriz tiene 2 elementos y uno de no es una cadena vacía. Quiero contarlos en la barra de filtros (3) para que tengamos 3 filtros activos.
También tengo un analizador de URL:
export const parseURLFilters = (search, setDefaultIfEmpty) => { const queryParams = queryString.parse(search, { parseBooleans: true, parseNumbers: true, }); const filters = {}; Object.entries(defaultValues).forEach(([key, defaultValue]) => { const queryParamValue = queryParams[key]; if (setDefaultIfEmpty || (!setDefaultIfEmpty && queryParamValue)) { if (queryParamValue && isArray(defaultValue)) { // Parse array query param values correctly filters[key] = isArray(queryParamValue) ? queryParamValue : [queryParamValue]; } else { filters[key] = queryParamValue || defaultValue; } } }); return filters; };Si consola.log(parseURLFilters(ubicación.búsqueda)) obtengo solo el campo con el valor real:
{ id: Array(2), dateTo: "2022-04-31T00:00:00.000Z", }Simplemente verifique la igualdad del objeto mientras mantiene una variable para contar los diferentes valores ( count ). Además, realice una verificación profunda de los valores de matriz.
const defaultValues = { id: [], dateFrom: '', dateTo: '', numbers: [], cars: [], } const newValues = { id: [1,2], dateTo: "2022-04-31T00:00:00.000Z", dateFrom: "", cars: [], numbers: [] } const checkEqualArray = (arr1, arr2) => { arr1.sort(); arr2.sort(); return arr1.length === arr2.length && arr1.every((val, index) => val === arr2[index]); } const getTotalFilters = (obj1, obj2) => { let count = 0; for(const key in obj1) { if(obj1.hasOwnProperty(key) && obj2.hasOwnProperty(key)) { if(Array.isArray(obj1[key]) && Array.isArray(obj2[key])) { count += !checkEqualArray(obj1[key], obj2[key]); } else { count += obj1[key] !== obj2[key]; } } } console.log(count); } getTotalFilters(defaultValues, newValues);