Json filter help with jQuery

Question

I need help with the Json filter with jQuery, I have this code:

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

It filters a JSON and returns me those that the time is greater than the time selected in a slide range.

If you put a:

console.log(section.flight.);

In place of:

Stretch.voo.length > 0;

You can see on the console that it filters normally but when I try to give a return it returns all data up to those that are less than the time of the slide range.

---

Does anyone know how to get only the filtered data back?

When calling the function it only returns the filtered data?

---

called Filter(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"
                  }
               ]
            }
         ]
      }
   ]
}

Assuming I select the time 10:30 at the slide range he should return me only where the hour of dtPartida(dtPartida.slcie(9, 14)) is greater than the time selected in slide range in case 10:30. the return would be so:

[
  {
     "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"
              }
           ]
        }
     ]
  }
]

Follow the code on Jsfiddle

Answer 1

Consider the following data:

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"
                  }
               ]
            }
         ]
      }
   ]
};

The idea is to define a function that, for an entry time, returns all items in the list that have dtPartida greater than or equal to this time. A solution, using ES6, is to copy the data i filter them through the 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;
}

But each item in aPesquisa can have multiple values in trecho, so we should filter the data into trecho also:

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

However, each section can have multiple values in voo, so we should filter the data into voo also:

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

Finally we can filter the data from voo based on the value of dtPartida. In order to do so, we need to check whether the timetable is greater than or equal to that defined by 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;
}

This way, if we call the function chamaFiltro("10:30"), the exit will be:

[
  [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"
      }]
    }]
  }
]

Possessing only the desired values.

See working on Jsbin or in the Repl.it.

---

Only after I decided I could understand what you did and realized it’s exactly the same logic. The only difference is that you clone the objects voo and trecho inside the filters and this is the error. The function callback of the filter returns a boolean value that, if true, keeps the object original on the list. That is, you clone the object, but when it returns true in the filter, instead of keeping in the list the clone, which would be modified by internal filters, keeps the original object at all times. To get around this, simply clone the entire object before filtering it and just modify it in the internal filters, as I did above. See that I cloned the object using Object.assign, but it is possible to do with JSON, as you had done.

Answer 2

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

Answer 3

Here is another suggestion:

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

The central part would be:

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

that filters arrays according to minimum and maximum.

A working example would be:

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>