json对象上有多个过滤器?

时间:2017-07-26 13:47:08

标签: javascript jquery json filter

我有一个针对单个json对象的10个过滤器:

var filtro1 = function(value, selecionado){
    var data = JSON.parse(JSON.stringify(json.aPesquisa));
    var result = data.filter(function(pesquisa){
        ...
    });
    return result;
}

var filtro2 = function(value, selecionado){
    var data = JSON.parse(JSON.stringify(json.aPesquisa));
    var result = data.filter(function(pesquisa){
        ...
    });
    return result;
}

var filtro3 = function(horamin, horamax){
    var data = JSON.parse(JSON.stringify(json.aPesquisa));
    var result = data.filter(function(pesquisa){
        ...
    });
    return result;
}

var filtro4 = function(value, selecionado){
    var data = JSON.parse(JSON.stringify(json.aPesquisa));
    var result = data.filter(function(pesquisa){
        ...
    });
    return result;
}
...

等等。正如您所看到的那样,每个过滤器都是单独工作的,即如果我使用filtro1进行过滤,然后使用filtro2进行过滤,则只显示过滤器。

我有什么方法可以将这些过滤器放在一起吗?

我考虑过使用带有选定过滤器的数组:

var filtros = ["filtro1, "filtro2", "filtro6", "filtro9", "filtro10"];

但我不能。

想法并将过滤器链接起来。

更多信息:

测试JSON:

{
  "aPesquisa":[
    {
      "trecho":[
        {
          "info":[
            {
              "cor":{
                "nm":"Laranja"
              },
              "dtPartida":"20170620 11:20",
              "dtChegada":"20170620 16:40",
              "hrDuracao":"03:20",
              "vTarifa":{
                "tarifa":{
                  "vlTotal":1969.17
                }
              }
            }
          ]
        },
        {
          "info":[
            {
              "cor":{
                "nm":"Vermelho"
              },
              "dtPartida":"20170620 11:20",
              "dtChegada":"20170620 16:40",
              "hrDuracao":"03:25",
              "vTarifa":{
                "tarifa":{
                  "vlTotal":769.90
                }
              }
            },
            {
              "cor":{
                "nm":"Vermelho"
              },
              "dtPartida":"20170620 11:20",
              "dtChegada":"20170620 16:40",
              "hrDuracao":"03:30",
              "vTarifa":{
                "tarifa":{
                  "vlTotal":2969.20
                }
              }
            },
            {
              "info":[
                {
                  "cor":{
                    "nm":"Azul"
                  },
                  "dtPartida":"20170620 11:20",
                  "dtChegada":"20170620 16:40",
                  "hrDuracao":"03:20",
                  "vTarifa":{
                    "tarifa":{
                      "vlTotal":669.17
                    }
                  }
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

我的10个过滤器中的两个:

//DURATION FILTER
var filtroDuracao =  function(horamin, horamax)
{
  var data = JSON.parse(JSON.stringify(json.aPesquisa));
  var result = data.filter(function(item){
    var voos = item.trecho[0].info.filter(function(info){
      var time = horasParaMinutos(info.hrDuracao);
      return time >= horamin && time <= horamax;
    });
    item.trecho[0].voo = voos;
    return voos.length > 0;
  });
  return result;
};


// COLOR FILTER
var cores = [];
var filtroCor = function(value, selecionado){
  var sgv = value.split('|')[0];

  if (selecionado) {
    Array.prototype.push.apply(cias, json.aPesquisa.filter(function(pesquisa){
      var nm = pesquisa.trecho[0].info[0].cor.nm;
      return nm == sgv;
    }));
  } else {
    cias = cores.filter(function(pesquisa) {
      var nm = pesquisa.trecho[0].info[0].cor.nm;
      return nm != sgv;
    });
  }

  return cores;
}

filtroDuracao中我花了几分钟时间从滑梯游侠身上花费了horamin和horamax。

filtroCor我传递了value复选框的值,以及是否在selected中选择了它以过滤多种颜色。

颜色复选框代码(JavaScript):

$(".filtros input[name='cores']").on('change', function(event) {
    var value = $(this).val();
    filtroCor(value, this.checked);
});

幻灯片游侠代码(JavaScript):

$("#duracao-range").slider({
            range: true,
            min: 0,
            max: 1440, //1440 / 60 = 24
            step: 15,
            values: [0, 1439],
            slide: function(event, ui) {
                //Mínimo
                //calcula as horas, exemplo: 125 / 60 = 2,083, arredonda para 2
                var hoursMin = Math.floor(ui.values[0] / 60);
                //calcula os minutos, exemplo: 125 - 2 * 60 = 5
                //No final terá horas = 2 e minutos = 5
                var minutesMin = ui.values[0] - (hoursMin * 60); //restante são os minutos
                //acrescenta o zero a esquerda se houver apenas 1 digito, 1 = 01, 2 = 02 e etc...
                if (hoursMin.toString().length == 1) hoursMin = '0' + hoursMin;
                if (minutesMin.toString().length == 1) minutesMin = '0' + minutesMin;
                $(".min-duracao-label").html(hoursMin + ':' + minutesMin);
                //Máximo
                var hoursMax = Math.floor(ui.values[1] / 60);
                var minutesMax = ui.values[1] - (hoursMax * 60);
                if (hoursMax.toString().length == 1) hoursMax = '0' + hoursMax;
                if (minutesMax.toString().length == 1) minutesMax = '0' + minutesMax;
                $(".max-duracao-label").html(hoursMax + ':' + minutesMax);

               var horaminida= horasParaMinutos(hoursMin + ':' + minutesMin));
               var horamaxida= horasParaMinutos(hoursMax + ':' + minutesMax));
               filtroDuracao(horaminida, horamaxida);

            }
        });

horasParaMinutos函数将小时转换为分钟:

var horasParaMinutos = function (str) {
  var horas = str.split(':').map(Number);
  return horas[0] * 60 + horas[1];
}

我怀疑和以下之一:

我有一个持续时间复选框列表,选中了3,我选择了一个颜色复选框。如何获取要过滤的持续时间和颜色复选框?

1 个答案:

答案 0 :(得分:0)

您可以将过滤器函数与数组中的绑定参数一起使用,并应用reduce。

&#13;
&#13;
var array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
    filter1 = function(left, right, item) {
        return item >= left && item <= right;
    },
    filter2 = function(value, item) {
        return !(item % value);
    },
    filters = [filter1.bind(null, 1, 10), filter2.bind(null, 3)],
    result = filters.reduce((a, fn) => a.filter(fn), array);

console.log(result);
&#13;
&#13;
&#13;