Slider Range of jQuery

Asked

Viewed 450 times

1

Hey, how you doing? I have a code that filters the data of a JSON with jQuey, I can filter with pre-defined values in a variable. But I wanted to use the values of a jquery ui slide range to filter the json, but when I try to do this I can’t get it back empty. Does anyone know how I can use the slide range for such an operation? Thank you

I am making a Javascript filter with Jquery where it filters a result that is in Json, but I am not able to make it Filtre using a slider range from Jquery UI. JSON

var json = {
       "tpAmbiente":null,
       "hotelPesquisa":[
          {
             "dtEntrada":"20170510",
             "dtSaida":"20170511",
             "hotel":{
                "id":94,
                "nome":"Itamarati"
             },
             "quarto":[
                {
                   "quartoUh":[
                      {
                        "nQUarto": 1,
                         "tarifa":{
                            "vlDiariaTotal":157.21,
                            "desconto":null
                         },
                         "qtDisponivel":null,
                         "desconto":null
                      },
                      {
                        "nQUarto": 2,
                         "tarifa":{
                            "vlDiariaTotal":157.21,
                            "desconto":null
                         },
                         "qtDisponivel":null,
                         "desconto":null
                      },
                   ]
                }
             ]
          },
          {
             "dtEntrada":"20170510",
             "dtSaida":"20170511",
             "hotel":{
                "id":95,
                "nome":"copacabana"
             },
             "quarto":[
                {
                   "quartoUh":[
                      {
                        "nQUarto": 1,
                         "tarifa":{
                            "vlDiariaTotal":102.1,
                            "desconto":null
                         },
                         "qtDisponivel":null,
                         "desconto":null
                      },
                      {
                        "nQUarto": 2,
                         "tarifa":{
                            "vlDiariaTotal":102.1,
                            "desconto":null
                         },
                         "qtDisponivel":null,
                         "desconto":null
                      },
                   ]
                }
             ]
          },
          {
             "dtEntrada":"20170510",
             "dtSaida":"20170511",
             "hotel":{
                "id":96,
                "nome":"Itamarati"
             },
             "quarto":[
                {
                   "quartoUh":[
                      {
                        "nQUarto": 1,
                         "tarifa":{
                            "vlDiariaTotal":157.21,
                            "desconto":null
                         },
                         "qtDisponivel":null,
                         "desconto":null
                      },
                      {
                        "nQUarto": 2,
                         "tarifa":{
                            "vlDiariaTotal":157.21,
                            "desconto":null
                         },
                         "qtDisponivel":null,
                         "desconto":null
                      },
                   ]
                }
             ]
          },
          {
             "dtEntrada":"20170510",
             "dtSaida":"20170511",
             "hotel":{
                "id":96,
                "nome":"Litoral Hotel"
             },
             "quarto":[
                {
                   "quartoUh":[
                      {
                        "nQUarto": 1,
                         "tarifa":{
                            "vlDiariaTotal":1001.00,
                            "desconto":null
                         },
                         "qtDisponivel":null,
                         "desconto":null
                      },
                      {
                        "nQUarto": 2,
                         "tarifa":{
                            "vlDiariaTotal":1001.00,
                            "desconto":null
                         },
                         "qtDisponivel":null,
                         "desconto":null
                      },
                   ]
                }
             ]
          }
       ]
    };

Function

function filtro(min, max){
    var pesquisa = {
      min: min,
      max: max
    };
    var filtrados = json.hotelPesquisa.filter(function(hotel) {
        hotel.quarto[0].quartoUh = hotel.quarto[0].quartoUh.filter(function(quarto) {
            return quarto.tarifa.vlDiariaTotal  dados.min;
        });
        return hotel.quarto[0].quartoUh.length > 0;
    });
    console.log(filtrados);
}

I use Jquery UI the slider range that the code and:

$("#price-range").slider({
    range: true,
    min: 0,
    max: 1000,
    values: [ 0, 1000 ],
    slide: function( event, ui ) {
        tjq(".min-price-label").html(ui.values[ 0 ]);
        tjq(".max-price-label").html(ui.values[ 1 ]);
        filtro(ui.values[ 0 ], ui.values[ 1 ]);
    }
});

When I drag the slider it calls the filter function by passing the min and max parameters in order to filter the json with the minimum and maximum values of the slider. at first it even filters but after I drag the slider several times it returns empty:

[]

Does anyone know how I can fix this? Thank you!

javascript jquery json jquery-ui slide

  • How about you [Dit] your question and add your code? It will be much easier to understand what you are wanting. Also seek to make a [mcve] so that we can verify the solutions.

  • @Andersoncarloswoss I hope it will make you better to understand.

1 answer

2


Whenever possible, put your complete code on Jsfiddle or another similar tool. So we can see the problem occurring and it becomes easier to evaluate.

I made an example based on your code. If necessary, edit the code, click Update and send me the link.

Filtered values are appearing in the console log.

Example - Jsfiddle.

  • 1

    Thank you. My problem and the next. I need the filter to return me a json with all hotels where room prices are higher than 0 and lower than 1010 with manually set values in an array it filters normal but when using the slide range it does not filter. it starts to filter when slide the slide range but then starts to return only [] as shown ** IN THIS IMAGE ** jsfiddle link looks at https://jsfiddle.net/newtech/xrkuoqhq/2console/

  • I noticed that in your code, if there is no hotel that fits the filter (e.g.: Min=200 Max=900), the variable filtered does not get the values back. Because of lack of experience, I can not say why it occurs. However, see in my example, using the loop for (i = 0; i < filtrados.length; i++) this problem does not occur.

  • In your example there is how it returns the json instead of returning the price?

  • Yes. In console.log change room for filtered if (valorQuarto >= min && valorQuarto <= max) {&#xA; console.log(filtrados);&#xA; }

  • Note that it always returns 4 objects and in them there are rooms where the price is not within the values of the slide: https://uploaddeimagens.com.br/imagens/sssssssssssssss-png-5

Browser other questions tagged javascript jquery json jquery-ui slide

You are not signed in. Login or sign up in order to post.