0

Deseo implementar un filtro de este estilo:

introducir la descripción de la imagen aquí

Donde de acuerdo al checkbox seleccionado me filtre los valores de un array de números.

Por ejemplo con el siguiente array array = [180, 210, 250, 290, 350] :

  • Si solo tengo la primera condicion seleccionada (<100) el resultado seria un array vacio.
  • Si selecciono la segunda condicion (entre 100 y 200) y la cuarta condicion (>300) el resultado seria [180, 350]

Tengo la siguiente función planteada que podría manejar este tema, sin embargo siento que el código es demasiado largo y complicado.

JS

 function filtrarNumeros (array, c1, c2, c3, c4) {
 /*c1 al c4 son booleanos que representan si se selecciono la condición de filtro  */

    // f1 al f4 son los resultados de cada filtro
    // al final se concatenan
    let f1 = []
    let f2 = []
    let f3 = []
    let f4 = []
    if (c1) {
        f1 = array.filter(numero => {
        return numero < 100
        })
    }
    if (c2) {
        f2 = array.filter(numero => {
        return (numero >= 100 && numero < 200)
        })
    }
    if (c3) {
        f3 = array.filter(numero => {
        return (numero >= 200 && numero < 300)
        })
    }
    if (c4) {
        f4 = array.filter(numero => {
        return (numero >= 300)
        })
    }

    if ([c1, c2, c3, c4].every(e => e === false)) {
        return array // si no hay nada seleccionado devuelve el mismo array
    } else {
        return f1.concat(f2, f3, f4)
    }
}

Agradecería su ayuda para tener una versión mas elegante y legible que me permita resolver este problema.

3
  • si seleccionas opc 1 y opc 2, no se te repiten los números? por que varios array si luego los juntas en uno? por que no un solo array "result" y a este le vas enviando los filtros.
    – Fran Islas
    el 30 ene. 2019 a las 3:19
  • No se repiten, porque son rangos diferentes. La opción 1 son los números menores de 100 y la opción 2 son del número 100 hasta el 199. Yo utilizo varios arrays porque tengo entendido que si encadenó filter me va a trabajar con el resultado anterior, y necesitaría filtrar con el arrays base el 30 ene. 2019 a las 12:00
  • Por ejemplo si selecciono que quiero los números menores que 100 y mayores a 300, y utilizó filter consecutivos al primer filtro solo obtendría los números menores que 100 y nunca encontraría los que son mayores a 300. Lo que se me ocurrió es que hago el filter al Array base por separado y luego los concateno, pero por eso pido ayuda porque siento que no es una buena solución. el 30 ene. 2019 a las 12:04

2 respuestas 2

1

Para darle mayor dinamismo podrías establecer los valores mínimos y máximos en los inputs y basarte en estos para obtener los resultados. Fíjate que en el último utilizo la propiedad Infinity y luego convierto los valores de los dataset en números utilizando el unario + (referencia), el cual también es válido para Infinity.

document.querySelector('button').addEventListener('click', () => {
    const values = [180, 210, 250, 290, 350];
    const targets = document.querySelectorAll('input');
    const result = [];
    targets.forEach(el => {
        const min = +el.dataset.min;
        const max = +el.dataset.max;
        if (el.checked) {
            values.some(v => {
                if (v >= min && v <= max) {
                    result.push(v);
                    return true;
                }
            });
        }
    });
    console.log(result);
});
label { display: block }
<label><input type="checkbox" data-min="0" data-max="99"> &lt;100</label>
<label><input type="checkbox" data-min="100" data-max="199"> 100-199</label>
<label><input type="checkbox" data-min="200" data-max="300"> 200-300</label>
<label><input type="checkbox" data-min="301" data-max="Infinity"> &gt;300</label>

<button>filtrar</button>

jsFiddle

1
  • Excelente, me gusto mucho esta alternativa. Me estaba enfocando demasiado en usar filter. el 30 ene. 2019 a las 14:35
1

puedes hacerlo asi:

// arreglo de valores   
let val = [180, 210, 250, 290, 350];

// function entre valida el rango
function entre(min,max){
    // creamos un arreglo vacio que contendra nuestro respuesta
    let r=[];

    //recorremos en arreglo
    for (let i of val) {
        // si la poscion i del arreglo esta entre el minimo y el maximo lo agregamos al arreglo r
        if (i > min && i < max) r.push(i);
    }
    //retornamos valores
    return r;
}

document.querySelector('button').addEventListener('click', () => {

    // hacemos un recorrido de cada elemento input
    for(let x of document.querySelectorAll('input')){
        //validamos que este seleccionado
        if (x.checked){
            //extraemos su minimo y su maximo
           let min = x.getAttribute("data-min");
           let max = x.getAttribute("data-max");
           // lo enviamos a la funcion para entre para validar
           let r = entre(min,max)
           console.log(r);
      }
    }
});
  label { display: block }
    <label><input type="checkbox" data-min="0" data-max="99"> &lt;100</label>
    <label><input type="checkbox" data-min="100" data-max="199"> 100-199</label>
    <label><input type="checkbox" data-min="200" data-max="300"> 200-300</label>
    <label><input type="checkbox" data-min="301" data-max="Infinity"> &gt;300</label>

    <button>filtrar</button>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.