Help with JSON and jQuery

Question

Hello.
I have the following code: Jsfiddle

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 star so far everything well. 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.

And assuming that the checkbox 1, 4 and 0 are selected, and if I uncheck 0 I only need to return the hotels with 1 and 4 stars. And so on.

Someone would know how to fix this?

Answer 1

First the event you are using to check if a checkbox has been selected is not the most correct (click). For such action, it is best to use the change:

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

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

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

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

filtro(value, this.checked);

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

var hotels = [];

This variable will be populated within the function filtro, 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 function filtro has been selected, we use the method apply to merge an array with another array. Another alternative to this step is to use the method concat:

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

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

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

Follow Jsfiddle with the solution: https://jsfiddle.net/xrkuoqhq/9/

Answer 2

The answers provided by friends @Pantera and @Everson, are correct and produce the expected result, but I would make a simpler approach.... You already have an object that contains the Selected Stars, the Checkbox Object Array itself, so you only need to check in the filter function, which are the Selected Checkbox, and if its value is equal to that 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));

}