1

Preciso de ajuda com o filtro em Json com jQuery, tenho esse código:

var chamaFiltro = function(horaminida){
  var pesquisa = {
    idamin: horasParaMinutos(horaminida)
  };

  var filtrados = json.aPesquisa.filter(function(voo) {
    voo = JSON.parse(JSON.stringify(voo));
    voo.trecho = voo.trecho.filter(function(trecho){
      trecho = JSON.parse(JSON.stringify(trecho));
      trecho.voo = trecho.voo.filter(function(voos){
        return horasParaMinutos(voos.dtPartida.slice(9, 14)) >= pesquisa.idamin;
      });
      return trecho.voo.length > 0;
    });
    return voo.trecho.length > 0;
  });
  console.log(filtrados);
};

Ele filtra um JSON e me retorna os que a hora for maior que a hora selecionada em um slide range.

Se colocar um:

console.log(trecho.voo);

No lugar de:

return trecho.voo.length > 0;

Percebe-se no console que ele filtra normalmente mas quando tento dar um return ele retorna todos os dados ate os que são menores que a hora do slide range.


Alguem sabe como faço para que retorne somente os dados filtrados?

Quando chamar a função ele só retornar os dados filtrados?


chamaFiltro(horaminida);

Json:

{
   "aPesquisa":[
      {
         "dsObservacao":null,
         "trecho":[
            {
               "sqTrecho":1,
               "voo":[
                  {
                    "dtPartida":"20170620 11:20",
                    "dtChegada":"20170620 16:40"
                  }
               ]
            },
            {
               "sqTrecho":2,
               "voo":[
                  {

                     "dtPartida":"20170627 04:10",
                     "dtChegada":"20170627 07:40"
                  },
                  {
                     "dtPartida":"20170627 14:15",
                     "dtChegada":"20170627 17:40"
                  }
               ]
            }
         ]
      },

      {
         "dsObservacao":null,
         "trecho":[
            {
               "sqTrecho":1,
               "voo":[
                  {
                    "dtPartida":"20170720 11:20",
                    "dtChegada":"20170720 16:40"
                  }
               ]
            },
            {
               "sqTrecho":2,
               "voo":[
                  {

                     "dtPartida":"20170727 04:10",
                     "dtChegada":"20170727 07:40"
                  },
                  {
                     "dtPartida":"20170727 14:15",
                     "dtChegada":"20170727 17:40"
                  }
               ]
            }
         ]
      }
   ]
}

Supondo que eu selecione a hora 10:30 no slide range ele deveria me retornar somente onde o a hora do dtPartida(dtPartida.slcie(9, 14)) for maior que a hora selecionada no slide range no caso 10:30. o retorno seria assim:

[
  {
     "dsObservacao":null,
     "trecho":[
        {
           "sqTrecho":1,
           "voo":[
              {
                "dtPartida":"20170620 11:20",
                "dtChegada":"20170620 16:40"
              }
           ]
        },
        {
           "sqTrecho":2,
           "voo":[
              {
                 "dtPartida":"20170627 14:15",
                 "dtChegada":"20170627 17:40"
              }
           ]
        }
     ]
  },

  {
     "dsObservacao":null,
     "trecho":[
        {
           "sqTrecho":1,
           "voo":[
              {
                "dtPartida":"20170720 11:20",
                "dtChegada":"20170720 16:40"
              }
           ]
        },
        {
           "sqTrecho":2,
           "voo":[
              {
                 "dtPartida":"20170727 14:15",
                 "dtChegada":"20170727 17:40"
              }
           ]
        }
     ]
  }
]

Segue o código no JSFiddle

0

3 Respostas 3

4
+200

Consideremos os seguintes dados:

const json = {
   "aPesquisa":[
      {
         "dsObservacao":null,
         "trecho":[
            {
               "sqTrecho":1,
               "voo":[
                  {
                    "dtPartida":"20170620 11:20",
                    "dtChegada":"20170620 16:40"
                  }
               ]
            },
            {
               "sqTrecho":2,
               "voo":[
                  {

                     "dtPartida":"20170627 04:10",
                     "dtChegada":"20170627 07:40"
                  },
                  {
                     "dtPartida":"20170627 14:15",
                     "dtChegada":"20170627 17:40"
                  }
               ]
            }
         ]
      },

      {
         "dsObservacao":null,
         "trecho":[
            {
               "sqTrecho":1,
               "voo":[
                  {
                    "dtPartida":"20170720 11:20",
                    "dtChegada":"20170720 16:40"
                  }
               ]
            },
            {
               "sqTrecho":2,
               "voo":[
                  {

                     "dtPartida":"20170727 04:10",
                     "dtChegada":"20170727 07:40"
                  },
                  {
                     "dtPartida":"20170727 14:15",
                     "dtChegada":"20170727 17:40"
                  }
               ]
            }
         ]
      }
   ]
};

A ideia é definir uma função que, para um horário de entrada, retorne todos os itens da lista que possuem dtPartida maior ou igual a este horário. Uma solução, utilizando ES6, é copiar os dados i filtrá-los através do filter:

function chamaFiltro (horaminida)
{
  // Copia os dados para `data`:
  let data = JSON.parse(JSON.stringify(json))

  // Filtra os dados em `aPesquisa`:
  let result = data.aPesquisa.filter(item => {

    /// ...

  });

  // Retorna o resultado:
  return result;
}

Porém cada item em aPesquisa pode possuir múltiplos valores em trecho, portanto devemos filtrar os dados em trecho também:

function chamaFiltro (horaminida)
{
  // Copia os dados para `data`:
  let data = JSON.parse(JSON.stringify(json))

  // Filtra os dados em `aPesquisa`:
  let result = data.aPesquisa.filter(item => {

    // Filtra os dados em `aPesquisa[i].trecho`:
    let trechos = item.trecho.filter(trecho => {

      // ...

    });

    // Atualiza os valores filtrados dos trechos:
    item.trecho = trechos;

    // Mantém no resultado final se possuir dados em trecho:
    return trechos.length > 0;

  });

  // Retorna o resultado:
  return result;
}

Porém cada trecho pode possuir múltiplos valores em voo, portanto devemos filtrar os dados em voo também:

function chamaFiltro (horaminida)
{
  // Copia os dados para `data`:
  let data = JSON.parse(JSON.stringify(json))

  // Filtra os dados em `aPesquisa`:
  let result = data.aPesquisa.filter(item => {

    // Filtra os dados em `aPesquisa[i].trecho`:
    let trechos = item.trecho.filter(trecho => {

      let voos = trecho.voo.filter(voo => {

        // ...

      });

      // Atualiza os valores filtrados dos voos:
      trecho.voo = voos;

      // Mantém no resultado final se possuir dados em voo:
      return voos.length > 0;

    });

    // Atualiza os valores filtrados dos trechos:
    item.trecho = trechos;

    // Mantém no resultado final se possuir dados em trecho:
    return trechos.length > 0;

  });

  // Retorna o resultado:
  return result;
}

Finalmente podemos filtrar os dados de voo baseando-se no valor de dtPartida. Para tal, precisamos verificar se o horário do mesmo é maior ou igual ao definido por horaminida.

function chamaFiltro (horaminida)
{
  // Copia os dados para `data`:
  let data = JSON.parse(JSON.stringify(json))

  // Filtra os dados em `aPesquisa`:
  let result = data.aPesquisa.filter(item => {

    // Filtra os dados em `aPesquisa[i].trecho`:
    let trechos = item.trecho.filter(trecho => {

      let voos = trecho.voo.filter(voo => {

        // Extrai o horário de `dtPartida`:
        let time = voo.dtPartida.split(' ')[1];

        // Mantém no resultado final se o horário for maior ou igual ao de entrada:
        return time > horaminida;

      });

      // Atualiza os valores filtrados dos voos:
      trecho.voo = voos;

      // Mantém no resultado final se possuir dados em voo:
      return voos.length > 0;

    });

    // Atualiza os valores filtrados dos trechos:
    item.trecho = trechos;

    // Mantém no resultado final se possuir dados em trecho:
    return trechos.length > 0;

  });

  // Retorna o resultado:
  return result;
}

Desta forma, se chamarmos a função chamaFiltro("10:30"), a saída será:

[
  [object Object] {
    dsObservacao: null,
    trecho: [[object Object] {
      sqTrecho: 1,
      voo: [[object Object] {
        dtChegada: "20170620 16:40",
        dtPartida: "20170620 11:20"
      }]
    }, [object Object] {
      sqTrecho: 2,
      voo: [[object Object] {
        dtChegada: "20170627 17:40",
        dtPartida: "20170627 14:15"
      }]
    }]
  }, [object Object] {
    dsObservacao: null,
    trecho: [[object Object] {
      sqTrecho: 1,
      voo: [[object Object] {
        dtChegada: "20170720 16:40",
        dtPartida: "20170720 11:20"
      }]
    }, [object Object] {
      sqTrecho: 2,
      voo: [[object Object] {
        dtChegada: "20170727 17:40",
        dtPartida: "20170727 14:15"
      }]
    }]
  }
]

Possuindo apenas os valores desejados.

Veja funcionando no JSBin ou no Repl.it.


Somente depois que resolvi que consegui entender o que você fez e percebi que é exatamente a mesma lógica. A única diferença é que você clona os objetos voo e trecho dentro dos filtros e este é o erro. A função callback do filtro retorna um valor booleano que, se verdadeiro, mantém o objeto original na lista. Ou seja, você clona o objeto, mas quando retorna verdadeiro no filtro, ao invés de manter na lista o clone, que seria modificado por filtros internos, mantém o objeto original, com todos os horários. Para contornar isso, basta clonar o objeto inteiro antes de filtrá-lo e apenas modificá-lo nos filtros internos, tal como fiz acima. Veja que eu clonei o objeto usando Object.assign, mas é possível fazer com o JSON, tal como você havia feito.

3
  • Entendi. Quando utilizo seu código ao deslizar o slide range ele começa a me retornar so [] sabe porque isso? jsfiddle.net/8m061jt7/10
    – Enio
    Commented 23/06/2017 às 17:49
  • @Newtech estranho, aqui parece estar funcionando corretamente, retornando os dois objetos (2) [Object, Object] ao deslizar o slide. A saída que teve aí foi vazia?
    – Woss
    Commented 23/06/2017 às 18:01
  • quando deslizo o slide aumentando a hora ele retorna os dois objetos mas quando volto o slide ele retorna vazio. imgur.com/a/TdXic
    – Enio
    Commented 23/06/2017 às 18:09
3
function filtroHora(horaminida, horamaxida, horaminvolta, horamaxvolta){
   var trechos = jsonParaFiltrar.aPesquisa;
   var trechosFiltrados = trechos.filter(function(trecho){
       //essa função retorna para um vetor apenas os itens que retornarem true
       var estaNoRange = suaLogicaAqui;
       return estaNoRange;
   }
}
2
  • teria como você editar no jsFiddle esse código?
    – Enio
    Commented 19/06/2017 às 19:22
  • jsfiddle.net/8m061jt7/1
    – Enio
    Commented 19/06/2017 às 20:21
1

Aqui fica mais uma sugestão:

jsFiddle: http://jsfiddle.net/abjj8gkd/

A parte central seria:

function filtrar(json, min, max) {
    return json.aPesquisa.map(obj => {
        return obj.trecho.filter(trecho => {
            var partida = horasParaMinutos(trecho.voo[0].dtPartida);
            var chegada = horasParaMinutos(trecho.voo[0].dtChegada);
            return partida >= min && chegada <= max;
        });
    });
}

que filtra as arrays consoante o minimo e máximo.

Um exemplo a funcionar seria:

var legenda = document.getElementById('legenda');
$("#slider").slider({
    range: true,
    animate: true,
    step: 1,
    min: 0,
    max: 1440, // 1440 são a quantidade de minutos num dia
    values: [0, 1440],
    slide: function(event, ui) {
        mostrarTrechos.apply(null, ui.values);
        legenda.innerHTML = ui.values.map(val => [Math.floor(val / 60), val % 60].map(h => h < 10 ? '0' + h : h).join(':')).join(' > ')
    }
});

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

function filtrar(json, min, max) {
    return json.aPesquisa.map(obj => {
        return obj.trecho.filter(trecho => {
            var partida = horasParaMinutos(trecho.voo[0].dtPartida);
            var chegada = horasParaMinutos(trecho.voo[0].dtChegada);
            return partida >= min && chegada <= max;
        });
    });
}

function mostrarTrechos(min, max) {
    var filtrados = filtrar(json, min || 0, max || 1440);
    $('pre').text(JSON.stringify(filtrados, null, 4));
}

const json = {
    "aPesquisa": [{
            "dsObservacao": null,
            "trecho": [{
                "sqTrecho": 1,
                "voo": [{
                    "dtPartida": "20170620 11:20",
                    "dtChegada": "20170620 16:40"
                }]
            }, {
                "sqTrecho": 2,
                "voo": [{

                    "dtPartida": "20170627 04:10",
                    "dtChegada": "20170627 07:40"
                }, {
                    "dtPartida": "20170627 14:15",
                    "dtChegada": "20170627 17:40"
                }]
            }]
        },

        {
            "dsObservacao": null,
            "trecho": [{
                "sqTrecho": 1,
                "voo": [{
                    "dtPartida": "20170720 11:20",
                    "dtChegada": "20170720 16:40"
                }]
            }, {
                "sqTrecho": 2,
                "voo": [{

                    "dtPartida": "20170727 04:10",
                    "dtChegada": "20170727 07:40"
                }, {
                    "dtPartida": "20170727 14:15",
                    "dtChegada": "20170727 17:40"
                }]
            }]
        }
    ]
};
* {
    padding: 0;
    margin: 0;
}

#legenda {
    margin-top: 20px;
}

#sliderHolder {
    padding: 100px 20px 20px 20px;
}

.ui-slider {
    position: relative;
    height: 6px;
    background: #ddf;
    cursor: pointer;
    border-radius: 3px;
}

.ui-slider-range {
    position: absolute;
    height: 6px;
    background: #aaf;
    top: 0;
    font-size: 0;
}

.ui-slider-handle {
    position: absolute;
    height: 30px;
    top: -12px;
    width: 20px;
    margin-left: -10px;
    outline: none;
    background: #aab;
    border-radius: 5px;
}

.ui-slider-handle:hover,
.ui-slider-handle:active {
    background: #889;
}

.ui-disabled .ui-slider-range {
    background: grey;
}

.ui-disabled .ui-slider-handle {
    background: lightgrey;
}

.ui-disabled,
.ui-disabled .ui-slider-handle {
    cursor: default;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

<div id="sliderHolder">
    <div id="slider"></div>
    <div id="legenda"></div>
</div>
<pre></pre>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .