【问题标题】:Multiple filters on a json object?json对象上的多个过滤器?
【发布时间】:2017-07-26 13:47:08
【问题描述】:

我有 10 个过滤器用于单个 json 对象:

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 过滤,它只会显示 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);
});

Slide Ranger 代码 (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 的持续时间复选框列表,我选择了一个颜色复选框。如何获取要过滤的持续时间和颜色复选框?

【问题讨论】:

  • JSON.parse(JSON.stringify(json.aPesquisa)); ...?你也可以在第一个实例中使用json.aPesquisa
  • 请添加一个示例,整个过滤是如何工作的。至少你需要存储每个函数的两个参数。
  • @RoryMcCrossan 是的,我用JSON.parse (JSON.stringify (json.Lookup)); .filter` 替换为json.aLookup 返回nullo` [] `
  • @NinaScholz 我更新了问题

标签: javascript jquery json filter


【解决方案1】:

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

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);

【讨论】:

    猜你喜欢
    • 2016-07-10
    • 1970-01-01
    • 2021-09-24
    • 1970-01-01
    • 1970-01-01
    • 2018-03-22
    • 1970-01-01
    • 2019-02-28
    • 1970-01-01
    相关资源
    最近更新 更多