El valor de typeOfFilters se selecciona de un componente diferente, por lo que en mi componente actual obtengo el valor de la moneda y la frecuencia, pero mi función de filtro no itera sobre la frecuencia.
Quiero agregar más filtros a mi función de filtro. ¿Dime cómo puedo simplificar este problema? los planes se ven así.
let plans = [ { "amount": 6000, "currency": "USD", "frequency": "MONTH", "planId": "plan_L7mrzVML9o6G5c", "planName": "computer", "provider": "stripe" }, { "amount": 2000, "currency": "INR", "frequency": "DAY", "planId": "plan_KkHkJPEVR7ZA2s", "planName": "Platinum", "provider": "stripe" } ] const typeOfFilters = { currency: ['INR'], frequency: ['DAY'], provider: "", amount: "", status: "", } const sortedTableArray = plans.filter(function (plan) { for (const [f, values] of Object.entries(typeOfFilters)) { if (!typeOfFilters[f]) { return true; } if ( f === "currency" && typeOfFilters["frequency"].indexOf(plan[f]) > -1 ) { return true; } if (f === "currency" && typeOfFilters[f].indexOf(plan[f]) > -1) { return true; } if (plan[f] === undefined || plan[f] !== typeOfFilters[f]) { return false; } } }); ``` expected output should return the table entry which has the frequency inside typeOfFilter['frequency']Creo que está tratando de filtrar los datos en función de varios filtros y suponiendo que el filtro individual también puede tener varios valores. Por ejemplo: si el filtro de currency es ['USD', 'INR'] entonces espera planes de ambos tipos de moneda.
Actualicé el objeto typeOfFilters de la siguiente manera para que cada filtro pueda tener un estado inicial básico:
const typeOfFilters = { "currency": [], "frequency": [], "provider": [], "amount": 0, "status": [], }Y en base a eso aquí está la función final:
let sortedTableArray = plans.filter(plan => { for (let f in typeOfFilters) { // Tests for all array type filters if (typeOfFilters[f] instanceof Array && typeOfFilters[f].length == 0) { continue } if (typeOfFilters[f] instanceof Array && typeOfFilters[f].indexOf(plan[f]) == -1){ return false; } // Test for amount filter if (typeof typeOfFilters[f] === "number" && plan[f] < typeOfFilters[f]) { return false; } } return true });No estoy completamente seguro de lo que está tratando de lograr aquí, pero la iteración no falla. Solo es interrumpido por su último cheque:
if (plan[f] === undefined || plan[f] !== typeOfFilters[f]) { return false; }Más concretamente por:
plan[f] !== typeOfFilters[f]El primer filtro que se marca es este:
currency: ['INR']Y plan[f] podría ser 'INR', pero no es ['INR']. Entonces esta verificación siempre fallará. Por lo tanto, el filtro devuelve falso y pasa al siguiente plan.
Lo que creo que podrías estar buscando es algo como esto:
const plans = [ { amount: 6000, currency: "USD", frequency: "MONTH", planId: "plan_L7mrzVML9o6G5c", planName: "computer", provider: "stripe", }, { amount: 2000, currency: "INR", frequency: "DAY", planId: "plan_KkHkJPEVR7ZA2s", planName: "Platinum", provider: "stripe", }, ]; const typeOfFilters = { currency: ['INR'], frequency: ['DAY'], provider: "", amount: "", status: "", }; const sortedTableArray = plans.filter(plan => { for (const [f, value] of Object.entries(typeOfFilters)) { if (value) { if (Array.isArray(value) && value.includes(plan[f])) { return true; } else if (plan[f] === value) { return true; } } } }); console.log(sortedTableArray); let plans = [ { "amount": 6000, "currency": "USD", "frequency": "MONTH", "planId": "plan_L7mrzVML9o6G5c", "planName": "computer", "provider": "stripe" }, { "amount": 2000, "currency": "INR", "frequency": "DAY", "planId": "plan_KkHkJPEVR7ZA2s", "planName": "Platinum", "provider": "stripe" } ] let plansWithId = plans.map((item)=>{ item.id = guidGenerator(); return item; }); const typeOfFilters = { currency: ['INR'], frequency: ['MONTH'], provider: "", amount: "", status: "", } // 1. let your typeOfFilters have values are array. If not use typeof to make sure all are in same format. //2. add a id value to your plans to avoid duplicates let output = []; for(key in typeOfFilters){ let toff = typeOfFilters[key]; if(typeof(toff) === 'string'){ toff = [toff]; } const onlyvalues = toff.filter(v => v); // filter empty values if(onlyvalues.length){ temp = plansWithId.filter((item) => { return onlyvalues.indexOf(item[key]) !== -1; }); output = output.concat(temp); } } const selectedIds = []; const duplicatesRemoved = output.filter((item) => { if(selectedIds.indexOf(item.id) !== -1){ return false; } selectedIds.push(item.id); return true; }) console.log(duplicatesRemoved) function guidGenerator() { var S4 = function() { return (((1+Math.random())*0x10000)|0).toString(16).substring(1); }; return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4()); }El enfoque es la diferencia en esta solución. Los typeOfFilters se repiten primero y si coincide con alguno de los planes, se generará la salida.
Nota: Esto se basa en la condición OR. por lo que cualquier filtro coincide, proporcionará la salida.