Help with JSON and jQuery

0

Hello. Home I have the following code: JsFiddle Home In it I have 6 checkbox from 0 to 5 stars, and when I click on a checkbox it filters a json displaying the hotel that has such a star so everything is fine. The problem comes when I select more than 1 star.

Ex: If I select 1 star, 4 stars and 0 stars I need to return all hotels that have 1, 4 and 0 stars. Home And supposing that checkboxes 1, 4 and 0 are selected, and if I uncheck the 0 I need to return the 1 and 4 star hotels. And so on. Home Would anyone know how I can solve this?

    
asked by anonymous 15.05.2017 / 18:54

2 answers

1

First, the event you are using to check if a checkbox was selected is not the correct one ( click ). For this action, it is best to use change :

$("input[name='estrelas']").on('change', function(){ ...});

To solve the problem of removing the add a hotel to the final list, I added a variable that says whether or not the item was selected in the filtro function:

function filtro(valor, selecionado) {...}

This value comes from the checked property of the element that is receiving the change event mentioned above. In this case we can reference this element with this :

filtro(value, this.checked);

To maintain the status of selected elements among selection events, I have created a global variable called hotels , which will contain the selected hotels:

var hotels = [];

This variable will be populated within the filtro fault function, depending on the value selecionado :

if (selecionado) {
    Array.prototype.push.apply(hotels, json.hotelPesquisa.filter(function(hotel) {
      return hotel.hotel.qtEstrela == valor;
    }));
} else {
    hotels = hotels.filter(function(hotel) {
      return hotel.hotel.qtEstrela != valor;
    });
}

If the value passed to the filtro function was selected, we used the apply to merge an array with another array. Another alternative to this step is to use the concat :

hotels = hotels.concat(json.hotelPesquisa.filter(function(hotel) {
  return hotel.hotel.qtEstrela == valor;
}));

If the user has removed the value selection, that is the value this.checked == false , then we only filter the array hotels and we get the values other than the value that the user removed:

hotels = hotels.filter(function(hotel) {
  return hotel.hotel.qtEstrela != valor;
});

Follow JSFiddle with the solution: link

    
15.05.2017 / 19:10
0

The answers provided by friends @PanterA and @Everson, are correct and produce the expected result, but I would do a simpler approach .... You already have an object that contains Selected Stars, the CheckBox Object Array itself, so you only need to check the filter function, what CheckBox is selected, and if its value is the same as the one of the hotel being filtered.

function filtro(valor) {
  var filtrados = json.hotelPesquisa.filter(function(hotel) {

    var objEstrelas = $('[name=estrelas]');
    for(var i=0; i < objEstrelas.length; i++) {
        if ( (objEstrelas[i].checked==true) && (objEstrelas[i].value==hotel.hotel.qtEstrela) ) {
        return true;
      }
    }
    return false;
  });

    $("#resultado").html(JSON.stringify(filtrados));

}
    
15.05.2017 / 20:16