Tengo un menú con 3 grupos de casillas de verificación que se usarán para filtrar elementos en una página. Son store , city y level . Al marcar cualquier casilla en cualquiera de los grupos, agregue el valor a la matriz correspondiente en un objeto que se ve así:
items = { store: [], city: [], level: [] }El valor predeterminado es que todos los elementos estén visibles y que no haya casillas de verificación marcadas. Cuando las casillas están marcadas, sólo los elementos correspondientes a
Cada vez que se marca o desmarca una casilla, se filtran los elementos. Primero, los artículos se filtran por store y city y luego ese subconjunto de artículos se filtra aún más por level . Si no se marcan casillas de level , se muestran todos los niveles, pero si se marca alguno, solo se muestran las store/city marcadas de los level marcados.
Entonces mi objeto puede verse así
itms = { store: [ 'north', 'evans', 'dodge' ], city: [ 'boston', 'miami', ], level: [ 'gold', 'silver' ] } Al final, necesito una cadena que se vea así:
.north.gold,.north.silver,.evans.gold,.evans.silver,.dodge.gold,.dodge.silver,.boston.gold,.boston.silver,.miami.gold,.miami.silver, - el orden no importa
Si mi objeto se viera así:
items = { store: [ 'north', 'evans', 'dodge' ], cite: [ 'miami' ], level: [] } Necesitaría una cadena que se vea así:
.north,.evans,.dodge,.miami
Con suerte, entiendes la esencia...
Para derivar la cadena correctamente formateada del objeto, estoy haciendo algo, lo que estoy bastante seguro es terriblemente ineficiente, iterando:
for (let [key, value] of Object.entries(items)) { value.forEach(item => { if(key !== 'level') { finalSelectors.push(`.${item}`); if (key === 'city') { finalSelectors.push(`.${item}_child`); } } }); } let selectorsArr = finalSelectors; const reFinalSelectors = []; const selectedLevels = items.level; if(selectedLevels.length) { if(items.city.length || items.location.length) { finalSelectors.forEach(selector => { selectedLevels.forEach(level => { reFinalSelectors.push(`.${level}${selector}`); }); }); } else { selectedLevels.forEach(level => { reFinalSelectors.push(`.${level}`); }); } selectorsArr = reFinalSelectors; } Ni siquiera sé por dónde empezar a hacer esto de manera más eficiente, ya que estoy empezando a aprender a usar las funciones de matriz y no tengo una idea muy buena de las más avanzadas como Array.reduce() . Cualquier sugerencia o ayuda sería muy apreciada.
Parece que las matrices de tiendas y ciudades se tratan de forma idéntica a los fines del algoritmo, por lo que puede unirlas. Luego, todo lo que necesita hacer es unir cada uno de ellos con cada level : una iteración bidimensional fácil.
La única complicación es que, si no hay nada en el level , presione solo el prefijo (tienda/ciudad) en lugar de iterar sobre el level .
const items = { store: [ 'north', 'evans', 'dodge' ], city: [ 'boston', 'miami', ], level: [ 'gold', 'silver' ] }; const { level } = items; const resultArr = []; for (const prefix of items.store.concat(items.city)) { if (level.length) { for (const suffix of level) { resultArr.push(`.${prefix}.${suffix}`); } } else { resultArr.push(`.${prefix}`); } } console.log(resultArr.join(','));